/* ============================================================================
   CourseForge – design tokens
   Every colour, radius, shadow and step of the type scale lives here. Nothing
   else in the stylesheet hard-codes a colour, so both themes stay in sync by
   construction. index.html stamps data-theme on <html> before the first paint.

   Contrast
   --------
   Nothing in this file is small text on its own: the four text tiers and the
   five accent colours are drawn at 10.5px and 11.5px all over the application,
   and at those sizes WCAG AA asks for 4.5:1 against whatever is behind them.
   Every value below was chosen against that number rather than by eye, on the
   worst surface it is actually drawn on - which for a text tier is the flat
   panel or the neutral chip wash, and for an accent colour is its own 10%
   tint, because a badge puts the colour on a wash of itself.

   That constrains how quiet a quiet colour is allowed to be. The four text
   tiers are still four distinct steps, but the steps at the quiet end are
   necessarily smaller than they once were, because 4.5:1 is the floor and
   there is only so much room between it and the body colour. Anything added
   here later has to clear the same bar; the smaller a token is set, the less
   licence it has to recede.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* -- surfaces ---------------------------------------------------------- */
  --bg:            #0a0e17;
  --bg-grid:       #111827;
  --surface:       #111826;
  --surface-2:     #161f31;
  --surface-3:     #1c2739;
  --surface-hover: #1d2839;
  --overlay:       rgb(4 8 15 / 72%);

  /* -- lines ------------------------------------------------------------- */
  --border:        #212d44;
  --border-soft:   #1a2437;
  --border-strong: #33425f;

  /* -- text -------------------------------------------------------------- */
  --text:          #e8eef9;
  --text-muted:    #9baaC6;
  --text-dim:      #919db5;
  --text-faint:    #8290ad;

  /* -- accents ----------------------------------------------------------- */
  --accent:        #38bdf8;
  --accent-hover:  #7dd3fc;
  --accent-strong: #0284c7;
  --accent-ink:    #04121e;
  --accent-soft:   rgb(56 189 248 / 14%);
  --accent-line:   rgb(56 189 248 / 34%);

  --success:       #34d399;
  --success-soft:  rgb(52 211 153 / 14%);
  --success-line:  rgb(52 211 153 / 32%);
  --success-ink:   #04231a;

  --warning:       #fbbf24;
  --warning-soft:  rgb(251 191 36 / 14%);
  --warning-line:  rgb(251 191 36 / 32%);

  --danger:        #fb7185;
  --danger-hover:  #fda4af;
  --danger-soft:   rgb(251 113 133 / 13%);
  --danger-line:   rgb(251 113 133 / 32%);
  --danger-ink:    #2a0910;

  --magic:         #c084fc;              /* AI generated things */
  --magic-soft:    rgb(192 132 252 / 14%);
  --magic-line:    rgb(192 132 252 / 32%);

  --neutral-soft:  rgb(148 163 184 / 12%);

  /* -- the editor's own two backgrounds ---------------------------------- */
  /* Selected text has to be obvious at a glance and still readable through,
     so it is a wash rather than a fill; the current line is fainter still,
     because it is only ever a hint and must never hide a selection under it. */
  --select:        rgb(56 189 248 / 30%);
  --select-blur:   rgb(148 163 184 / 20%);
  --active-line:   rgb(148 163 184 / 7%);

  /* -- shape ------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-md: 0 6px 18px -6px rgb(0 0 0 / 55%);
  --shadow-lg: 0 24px 60px -18px rgb(0 0 0 / 70%);
  --ring: 0 0 0 3px var(--accent-soft);

  /* -- spacing ----------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* -- type -------------------------------------------------------------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --t-2xs: 10.5px;
  --t-xs:  11.5px;
  --t-sm:  13px;
  --t-md:  14px;
  --t-lg:  16px;
  --t-xl:  19px;
  --t-2xl: 24px;
  --t-3xl: 30px;

  /* -- layout ------------------------------------------------------------ */
  --sidebar-w: 236px;
  --outline-w: 320px;
  --inspector-w: 380px;
  --header-h: 58px;

  --speed: 140ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --z-drawer: 40;
  --z-popover: 60;
  --z-modal: 80;
  --z-toast: 100;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #eef1f7;
  --bg-grid:       #e3e8f1;
  --surface:       #ffffff;
  --surface-2:     #f6f8fc;
  --surface-3:     #eef2f8;
  --surface-hover: #eaeff7;
  --overlay:       rgb(15 23 42 / 34%);

  --border:        #dde3ee;
  --border-soft:   #e8ecf4;
  --border-strong: #c3ccdd;

  --text:          #10192b;
  --text-muted:    #48546c;
  --text-dim:      #566076;
  --text-faint:    #5f6e8b;

  --accent:        #026da4;
  --accent-hover:  #03689f;
  --accent-strong: #03689f;
  --accent-ink:    #ffffff;
  --accent-soft:   rgb(2 109 164 / 10%);
  --accent-line:   rgb(2 109 164 / 28%);

  --success:       #04724f;
  --success-soft:  rgb(4 114 79 / 10%);
  --success-line:  rgb(4 114 79 / 28%);
  --success-ink:   #ffffff;

  --warning:       #a34a07;
  --warning-soft:  rgb(163 74 7 / 10%);
  --warning-line:  rgb(163 74 7 / 26%);

  --danger:        #c51f1f;
  --danger-hover:  #a91919;
  --danger-soft:   rgb(197 31 31 / 9%);
  --danger-line:   rgb(197 31 31 / 26%);
  --danger-ink:    #ffffff;

  --magic:         #7c3aed;
  --magic-soft:    rgb(124 58 237 / 10%);
  --magic-line:    rgb(124 58 237 / 26%);

  --neutral-soft:  rgb(71 85 105 / 8%);

  --select:        rgb(2 109 164 / 22%);
  --select-blur:   rgb(100 116 139 / 15%);
  --active-line:   rgb(15 23 42 / 4%);

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
  --shadow-md: 0 8px 20px -10px rgb(15 23 42 / 22%);
  --shadow-lg: 0 24px 56px -20px rgb(15 23 42 / 28%);
}