/* High Definition Speakers — Color tokens
   Palette derived from the brand logo: the dark acoustic-foam stage,
   chrome metallic speaker-podium, cool overhead spotlight, and warm walnut lectern. */

:root {
  /* ---- Stage neutrals (the dark acoustic-foam backdrop) ---- */
  --ink-950: #06080B; /* deepest stage black */
  --ink-900: #0B0E13;
  --ink-850: #10141A;
  --ink-800: #161B23;
  --ink-750: #1C222B;
  --ink-700: #242C37;
  --ink-600: #323B48;
  --ink-500: #46505E;

  /* ---- Chrome / brushed metal (the speaker housing & wordmark) ---- */
  --chrome-50:  #F4F7FA;
  --chrome-100: #E8EDF2;
  --chrome-200: #D2DAE3;
  --chrome-300: #B6C0CC; /* primary silver */
  --chrome-400: #94A0AE;
  --chrome-500: #6F7C8B;
  --chrome-600: #515C69;

  /* ---- Spotlight blue (the cool overhead beam & rim light) ---- */
  --spotlight-100: #EAF3FF;
  --spotlight-200: #C9E0F7;
  --spotlight-300: #9FC6EE;
  --spotlight-400: #74A9DF;
  --spotlight-500: #4F8BCB; /* primary accent */
  --spotlight-600: #356FAE;
  --spotlight-700: #24527F;

  /* ---- Walnut (the wooden lectern & knight crest) ---- */
  --walnut-300: #C08A53;
  --walnut-400: #A56F38;
  --walnut-500: #8A5829; /* warm accent */
  --walnut-600: #6B4420;
  --walnut-700: #4C2F16;

  /* ---- Signal colors ---- */
  --success-500: #3FA66A;
  --warning-500: #D7972E;
  --danger-500:  #D1503F;

  /* ---- Gradients ---- */
  --grad-spotlight: radial-gradient(120% 90% at 50% -10%, rgba(234,243,255,0.22) 0%, rgba(79,139,203,0.10) 32%, rgba(6,8,11,0) 62%); /* @kind color */
  --grad-chrome: linear-gradient(180deg, #F4F7FA 0%, #C5CEda 18%, #8C99A8 50%, #C5CED9 82%, #EDF1F6 100%); /* @kind color */
  --grad-stage: linear-gradient(180deg, #10141A 0%, #06080B 100%); /* @kind color */
  --grad-cta: linear-gradient(180deg, #6FA0D6 0%, #4F8BCB 48%, #356FAE 100%); /* @kind color */

  /* ===================================================================
     SEMANTIC ALIASES — reference these in product code
     =================================================================== */

  /* Surfaces */
  --bg-stage: var(--ink-950);          /* page background */
  --bg-surface: var(--ink-900);        /* raised section */
  --surface-card: var(--ink-850);      /* cards / panels */
  --surface-raised: var(--ink-800);    /* popovers / inputs */
  --surface-inset: var(--ink-800);

  /* Text */
  --text-primary: var(--chrome-50);
  --text-secondary: var(--chrome-300);
  --text-muted: var(--chrome-500);
  --text-on-accent: #FFFFFF;
  --text-on-chrome: var(--ink-900);

  /* Lines & borders */
  --border-subtle: rgba(182,192,204,0.12);
  --border-default: rgba(182,192,204,0.20);
  --border-strong: rgba(182,192,204,0.38);

  /* Brand roles */
  --accent: var(--spotlight-500);
  --accent-hover: var(--spotlight-400);
  --accent-press: var(--spotlight-600);
  --accent-soft: rgba(79,139,203,0.14);
  --warm: var(--walnut-500);
  --warm-soft: rgba(138,88,41,0.16);

  /* Focus */
  --focus-ring: rgba(116,169,223,0.55);
}