/* ═══════════════════════════════════════════════════════════════════════════
   tokens.css, the only file that defines a raw value.

   Everything else in the system composes these. If you find yourself typing a
   hex code, a pixel radius or a duration anywhere else, add a token instead.

   Colour
   ------
   One dominant hue (petrol), one warm-neutral foundation (stone), and the
   three status colours a management console genuinely needs. Nothing else.

   Every foreground/background pair below was checked against WCAG 2.1:
   text pairs clear 4.5:1, and the control borders and focus ring clear 3:1,
   in both themes. `npm run check:contrast` re-verifies it against this file.

   Themes
   ------
   Light is the default and lives on bare `:root`. Dark is defined twice, once
   under `prefers-color-scheme` (guarded so an explicit light choice wins) and
   once under `[data-theme="dark"]` (so the toggle wins in both directions).
   No colour is ever defined *only* inside a media query.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Neutral foundation: warm stone ─────────────────────────────────── */
  --canvas:          #FAFAF9;  /* page ground */
  --surface:         #FFFFFF;  /* raised cards, menus, dialogs */
  --surface-sunken:  #F3F3F1;  /* wells, table headers, inset areas */
  --surface-hover:   #EFEFEC;
  --surface-active:  #E7E7E3;

  --border:          #E3E3DF;  /* decorative separators */
  --border-strong:   #C9C9C2;  /* card and table edges */
  --border-control:  #868C8A;  /* form control edges, 3.4:1, meets 1.4.11 */

  --text:            #1A1C1B;  /* 16.4:1 on canvas */
  --text-secondary:  #4C514F;  /*  7.7:1 */
  --text-muted:      #5F6664;  /*  5.6:1, still AA, unlike the 3.8:1 it replaced */
  --text-on-brand:   #FFFFFF;

  /* ── Dominant: petrol ───────────────────────────────────────────────── */
  --brand:           #0F5C5E;
  --brand-hover:     #0B4749;
  --brand-active:    #083436;
  --brand-subtle:    #E8F1F1;  /* tinted background for selected states */
  --brand-subtle-fg: #0B4749;
  --brand-border:    #BFD9D9;

  /* ── Status ─────────────────────────────────────────────────────────── */
  --success:         #1F6B3C;
  --success-bg:      #E7F3EB;
  --success-border:  #B6DBC4;

  --warning:         #8A5A11;
  --warning-bg:      #FBF1E0;
  --warning-border:  #E8CFA4;

  --danger:          #A3271F;
  --danger-hover:    #8A1F19;
  --danger-bg:       #FBEAE8;
  --danger-border:   #EEBDB8;

  /* ── Focus ──────────────────────────────────────────────────────────── */
  --focus-ring:      #0F5C5E;
  --focus-halo:      rgba(15, 92, 94, 0.18);

  /* Fixed brand colours for the two identity providers. These are their
     colours, not ours, so they do not change between themes. */
  --discord:         #5865F2;
  --roblox:          #C7442B;

  /* ── Elevation ──────────────────────────────────────────────────────── */
  /* Two levels only. A management console should read as flat panels on a
     ground, not a stack of floating cards. */
  --shadow-raised:  0 1px 2px rgba(24, 28, 27, 0.06), 0 1px 3px rgba(24, 28, 27, 0.04);
  --shadow-overlay: 0 8px 24px rgba(24, 28, 27, 0.12), 0 2px 8px rgba(24, 28, 27, 0.08);

  /* ── Type ───────────────────────────────────────────────────────────── */
  /* One family. Hierarchy comes from size and weight, not from a second face.
     The mono stack is the platform's own, no download, correct everywhere. */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --fs-caption:    0.75rem;    /* 12px, labels, meta, table headers */
  --fs-small:      0.8125rem;  /* 13px, secondary text, hints */
  --fs-body:       0.875rem;   /* 14px, the console's default */
  --fs-body-lg:    0.9375rem;  /* 15px, prose, marketing body */
  --fs-title-sm:   1rem;
  --fs-title:      1.125rem;
  --fs-title-lg:   1.375rem;
  --fs-display-sm: 1.75rem;
  --fs-display:    2.25rem;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.55;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight: -0.015em;
  --tracking-wide:   0.06em;

  /* ── Space: 4px base ────────────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* ── Control sizing ─────────────────────────────────────────────────── */
  /* 44px is the pointer-coarse target size; 34px is the pointer-fine default.
     base.css swaps between them on `(pointer: coarse)` rather than on width,
     so a touchscreen laptop gets real targets too. */
  --control-height:    34px;
  --control-height-lg: 40px;
  --tap-target:        44px;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    130ms;
  --dur:         200ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layers ─────────────────────────────────────────────────────────── */
  /* Named so nobody has to invent a z-index again.
     Ordered by what has to sit above what:
       sticky   in-page elements that scroll past content (the desktop sidebar)
       header   the app bar, above the page
       overlay  navigation surfaces that cover the page (the mobile drawer)
       menu     popovers, which are invoked FROM the header or the drawer and
                must therefore sit above both
       dialog   modals, which take the whole screen's attention
       toast    feedback, which must never be hidden by anything
     Menu was previously below overlay, so the server picker's dropdown opened
     behind the sidebar on desktop and behind the drawer on mobile. */
  --z-sticky:  10;
  --z-header:  20;
  --z-overlay: 30;
  --z-menu:    40;
  --z-dialog:  60;
  --z-toast:   70;

  --header-height: 52px;
  --content-max:   1200px;
  --prose-max:     68ch;

  color-scheme: light;
}

/* ── Dark: system preference, unless an explicit light choice overrides ─── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas:          #131615;
    --surface:         #1B1F1E;
    --surface-sunken:  #232827;
    --surface-hover:   #2B3130;
    --surface-active:  #333A38;

    --border:          #2E3433;
    --border-strong:   #454D4B;
    --border-control:  #727C7A;

    --text:            #EDEFEE;
    --text-secondary:  #B7BEBC;
    --text-muted:      #98A19F;
    --text-on-brand:   #08201F;

    --brand:           #6FC5C2;
    --brand-hover:     #8AD4D1;
    --brand-active:    #A3E0DD;
    --brand-subtle:    #16302F;
    --brand-subtle-fg: #8AD4D1;
    --brand-border:    #2C4E4C;

    --success:         #63C98A;
    --success-bg:      #152A1E;
    --success-border:  #2A4E37;

    --warning:         #E0B067;
    --warning-bg:      #2E2617;
    --warning-border:  #584727;

    --danger:          #F0918A;
    --danger-hover:    #F7A9A3;
    --danger-bg:       #331A19;
    --danger-border:   #5E2F2C;

    --focus-ring:      #6FC5C2;
    --focus-halo:      rgba(111, 197, 194, 0.24);

    --discord:         #7A85F5;
    --roblox:          #F08B72;

    /* Dark surfaces are separated by tone, not by drop shadow, shadows on a
       dark ground read as smudges. Keep them tight and mostly for overlays. */
    --shadow-raised:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}

/* ── Dark: explicit choice, wins over system preference either way ─────── */
:root[data-theme='dark'] {
  --canvas:          #131615;
  --surface:         #1B1F1E;
  --surface-sunken:  #232827;
  --surface-hover:   #2B3130;
  --surface-active:  #333A38;

  --border:          #2E3433;
  --border-strong:   #454D4B;
  --border-control:  #727C7A;

  --text:            #EDEFEE;
  --text-secondary:  #B7BEBC;
  --text-muted:      #98A19F;
  --text-on-brand:   #08201F;

  --brand:           #6FC5C2;
  --brand-hover:     #8AD4D1;
  --brand-active:    #A3E0DD;
  --brand-subtle:    #16302F;
  --brand-subtle-fg: #8AD4D1;
  --brand-border:    #2C4E4C;

  --success:         #63C98A;
  --success-bg:      #152A1E;
  --success-border:  #2A4E37;

  --warning:         #E0B067;
  --warning-bg:      #2E2617;
  --warning-border:  #584727;

  --danger:          #F0918A;
  --danger-hover:    #F7A9A3;
  --danger-bg:       #331A19;
  --danger-border:   #5E2F2C;

  --focus-ring:      #6FC5C2;
  --focus-halo:      rgba(111, 197, 194, 0.24);

  --discord:         #7A85F5;
  --roblox:          #F08B72;

  --shadow-raised:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}