/* ============================================================
   FALLS — DESIGN TOKENS
   The single source of truth for colour, space, type, motion and
   depth across the dashboard, the legal pages and the bot's own
   brand palette (see src/utils/brandPalette.js).

   Load order matters: tokens.css -> style.css -> per-tab sheets.
   Nothing here may reference a component; nothing else may define
   a raw colour. Every surface, line and accent flows through a
   token so the light theme stays correct everywhere.
   ============================================================ */

/* ------------------------------------------------------------
   1. INVARIANTS — identical in both themes.
   ------------------------------------------------------------ */
:root {
  /* Type families — self-hosted, no third-party font requests. */
  --font-sans: 'DM Sans', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;

  /* Type scale (1.20 ratio, trimmed to what the UI actually uses). */
  --text-3xs: 9px;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 19px;
  --text-2xl: 23px;
  --text-3xl: 29px;
  --text-4xl: 38px;
  --text-5xl: clamp(34px, 4.4vw, 62px);
  --leading-tight: 1.24;
  --leading-snug: 1.45;
  --leading-normal: 1.68;
  --leading-loose: 1.9;
  --tracking-tight: -.028em;
  --tracking-display: -.045em;
  --tracking-wide: .07em;

  /* Space scale — 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;

  /* Radii. One documented shape system for the whole site, so a surface never guesses:
       small controls, chips, badges, code spans -> --radius-xs / --radius-sm
       surfaces, tables, panels, cards           -> --radius-md
       the shell, the hero panel, avatars, marks  -> --radius-lg
       pills, status chips, skeletons            -> --radius-pill
       true circles (avatars, status dots)        -> 50%
     Anything outside that list is a bug, not a preference. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Motion — one scale, honoured by prefers-reduced-motion below. */
  --dur-instant: 90ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(.22, .8, .26, 1);
  --ease-in-out: cubic-bezier(.6, .05, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* Stacking order. */
  --layer-base: 1;
  --layer-nav: 20;
  --layer-sticky: 25;
  --layer-drawer: 30;
  --layer-modal: 40;
  --layer-toast: 50;
  --layer-lightbox: 60;

  /* Shell geometry. The app bar and the nav rail are the two heights the whole shell is
     built from, and the indicator, inset and dot sizes belong to the same family so a
     future edit moves one number instead of hunting literals through the sheet. */
  --shell-bar-height: 68px;
  --nav-item-height: 42px;
  --nav-indicator-width: 3px;
  --rail-inset: 6px;
  --dot-size: 6px;
  --dot-size-sm: 5px;

  /* Control geometry. */
  --control-h-xs: 30px;
  --control-h-sm: 36px;
  --control-h-md: 43px;
  --control-h-lg: 50px;
  --tap-target: 44px;
  --control-disabled-opacity: .5;
  --control-check: 16px;
  --control-spinner: 13px;
  --control-spinner-ring: 2px;

  /* Dropdown caret. The size is relative so one caret scales with every control size, and the
     reserve is derived from it so the option text can never reach the caret. */
  --control-caret: .44em;
  --control-caret-inset: 13px;
  --control-caret-reserve: calc(var(--control-caret-inset) + var(--control-caret) + var(--space-3));

  /* Focus contract - one ring for every interactive control, two documented offsets. */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--border-focus);
  --focus-ring-offset: 3px;
  --focus-ring-offset-tight: 2px;
  --focus-ring-offset-inset: 1px;
  --focus-ring-glow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);

  /* Inline validation. An invalid control is recognised by its border before its message is
     read, so the border carries the 3:1 non-text floor and the message text the 4.5:1 text
     floor. Both are --danger, which clears both in every palette. */
  --field-invalid-border: var(--danger);
  --field-invalid-text: var(--danger);
  --field-invalid-glow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
  --field-hint-text: var(--text-muted);
  --field-message-gap: var(--space-2);

  /* Data accent ramp — shared with the bot's embed colours. */
  --accent-violet: #c0aaff;
  --accent-cyan: #86dcea;
  --accent-emerald: #8fe2a8;
  --accent-amber: #f0c877;
  --accent-copper: #d3a67d;
}

html[lang="ar"] {
  --font-sans: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif;
  --font-display: 'IBM Plex Sans Arabic', 'Manrope', sans-serif;
  /* Arabic needs more vertical room and far less negative tracking. */
  --leading-tight: 1.42;
  --leading-snug: 1.6;
  --leading-normal: 1.82;
  --tracking-tight: 0;
  --tracking-display: -.012em;
}

/* ------------------------------------------------------------
   2. DARK THEME (default) — charcoal with a lime signal accent.
   ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  --bg-pitch: #07080b;
  --bg-app: #0b0c10;
  --bg-shell: #101217;
  --bg-sidebar: #0d0f13;
  --bg-surface: #15171e;
  --bg-surface-2: #1a1d25;
  --bg-card: #15171e;
  --bg-card-elevated: #1f2330;
  --bg-input: #0f1116;
  --bg-hover: #232735;
  --bg-active: #2b3420;
  --bg-inverse: #f2f4f8;

  --border-subtle: #242833;
  --border-medium: #6b7385;
  --border-highlight: #5f6879;
  --border-focus: #d4f77d;
  --border-inverse: #0b0c10;

  /* --text-muted and --border-medium are the floor for WCAG AA on --bg-card-elevated:
     4.5:1 for text and 3:1 for control borders. scripts/check-verification-ui.mjs measures
     both schemes, so lower either one and the gate fails rather than the site shipping it. */
  --text-primary: #f1f3f8;
  --text-secondary: #a7aec0;
  --text-muted: #8b93a8;
  --text-dim: #6d7488;
  --text-inverse: #12160a;

  /* Brand signal. */
  --accent-primary: #d4f77d;
  --accent-hover: #e3ffa4;
  --accent-soft: #26311c;
  --accent-ink: #141c08;
  --accent-text: #d4f77d;
  /* Accent as a non-text mark — a tab underline, an active rail, a timeline dot. --accent-primary
     is a fill: dark ink sits on it, so it is tuned against the ink rather than the page. Drawn as
     a 2-3px mark on a light surface it is invisible (#d4f77d is 1.19:1 on the light paper palette),
     which is why indicators get their own token. */
  --accent-white: #f1f3f8;
  --accent-indicator: var(--accent-primary);

  --danger: #ffa8a0;
  --success: #93e3ac;
  --warning: #f3cf87;
  --info: #8edceb;
  --danger-soft: #3a2422;
  --success-soft: #17301f;
  --warning-soft: #332c1c;
  --info-soft: #16303a;
  --danger-border: #653f3c;
  --danger-strong: #4d2b28;

  /* Elevation. */
  --shadow-sm: 0 1px 2px #0006;
  --shadow-card: 0 1px 2px #0005, 0 10px 28px -22px #000c;
  --shadow-raised: 0 2px 6px #0007, 0 18px 44px -26px #000e;
  --shadow-modal: 0 28px 80px #000b, 0 0 0 1px #ffffff0d;
  --glow-accent: 0 8px 26px -14px color-mix(in srgb, var(--accent-primary) 70%, transparent);

  --overlay: #0405089e;

  /* Surfaces that intentionally stay Discord-dark in both themes. */
  --discord-chat-bg: #313338;
  --discord-embed-bg: #2b2d31;
  --discord-embed-strip: #985d3c;
  --discord-mention-bg: #454a78;
  --discord-mention-ink: #c9cdfb;
  --discord-blurple: #5865f2;
  --discord-btn-secondary: #4e5058;
  --discord-btn-success: #248046;
  --discord-btn-danger: #da373c;
  --discord-crimson: #ff3344;
  --discord-amber: #f59e0b;
  --discord-emerald: #22c55e;
  --discord-text: #dbdee1;
  --discord-text-bright: #f2f3f5;
  --discord-text-muted: #a7adb6;
}

/* ------------------------------------------------------------
   3. LIGHT THEME — same structure, calm paper palette.
   ------------------------------------------------------------ */
html[data-theme="light"] {
  color-scheme: light;

  --bg-pitch: #e8ebe1;
  --bg-app: #f0f2ea;
  --bg-shell: #f7f8f3;
  --bg-sidebar: #f1f3eb;
  --bg-surface: #fdfefb;
  --bg-surface-2: #ffffff;
  --bg-card: #fdfefb;
  --bg-card-elevated: #edf0e5;
  --bg-input: #ffffff;
  --bg-hover: #e6eadc;
  --bg-active: #e2ecd0;
  --bg-inverse: #171c12;

  --border-subtle: #dfe3d6;
  --border-medium: #7a8370;
  --border-highlight: #97a189;
  --border-focus: #6f8f26;
  --border-inverse: #f7f8f3;

  /* Same AA floor as the dark theme, measured against the light --bg-card-elevated. */
  --text-primary: #191e13;
  --text-secondary: #4a5240;
  --text-muted: #646d58;
  --text-dim: #7b8470;
  --text-inverse: #f7f8f3;

  --accent-primary: #d4f77d;
  --accent-hover: #c8ef68;
  --accent-soft: #e6f2cb;
  --accent-ink: #1b2607;
  --accent-text: #4f6b0d;
  --accent-white: #191e13;
  --accent-indicator: #5f7a20;

  --danger: #ab2f26;
  --success: #1f6f40;
  --warning: #83600c;
  --info: #0d6679;
  --danger-soft: #fbe4e1;
  --success-soft: #dff1e4;
  --warning-soft: #f8eed4;
  --info-soft: #ddeff4;
  --danger-border: #dbaea8;
  --danger-strong: #f4d1cc;

  --shadow-sm: 0 1px 2px #22300b16;
  --shadow-card: 0 1px 2px #22300b12, 0 12px 30px -24px #22300b47;
  --shadow-raised: 0 2px 6px #22300b14, 0 20px 46px -28px #22300b4f;
  --shadow-modal: 0 28px 80px #22300b3d, 0 0 0 1px #22300b0d;
  --glow-accent: 0 8px 24px -16px #4f6b0d5c;

  --overlay: #17200e9e;
}

/* Dark is the default; an explicit attribute keeps the contract obvious. */
html:not([data-theme]) { color-scheme: dark; }

/* ------------------------------------------------------------
   4. ACCESSIBILITY BACKSTOPS
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --text-secondary: #d3d8e4;
    --text-muted: #b6bccb;
    --border-subtle: #4a5162;
    --border-medium: #7d8698;
  }
  html[data-theme="light"] {
    --text-secondary: #2c3325;
    --text-muted: #454d3a;
    --border-subtle: #9aa48d;
    --border-medium: #6d775f;
  }
}

/* Honour the OS preference until the visitor makes an explicit choice. */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg-pitch: #e8ebe1;
    --bg-app: #f0f2ea;
    --bg-shell: #f7f8f3;
    --bg-sidebar: #f1f3eb;
    --bg-surface: #fdfefb;
    --bg-surface-2: #ffffff;
    --bg-card: #fdfefb;
    --bg-card-elevated: #edf0e5;
    --bg-input: #ffffff;
    --bg-hover: #e6eadc;
    --bg-active: #e2ecd0;
    --bg-inverse: #171c12;
    --border-subtle: #dfe3d6;
    --border-medium: #7a8370;
    --border-highlight: #97a189;
    --border-focus: #6f8f26;
    --border-inverse: #f7f8f3;
    --text-primary: #191e13;
    --text-secondary: #4a5240;
    --text-muted: #646d58;
    --text-dim: #7b8470;
    --text-inverse: #f7f8f3;
    --accent-hover: #c8ef68;
    --accent-soft: #e6f2cb;
    --accent-ink: #1b2607;
    --accent-text: #4f6b0d;
    --accent-white: #191e13;
    --accent-indicator: #5f7a20;
    --danger: #ab2f26;
    --success: #1f6f40;
    --warning: #83600c;
    --info: #0d6679;
    --danger-soft: #fbe4e1;
    --success-soft: #dff1e4;
    --warning-soft: #f8eed4;
    --info-soft: #ddeff4;
    --danger-border: #dbaea8;
    --danger-strong: #f4d1cc;
    --shadow-sm: 0 1px 2px #22300b16;
    --shadow-card: 0 1px 2px #22300b12, 0 12px 30px -24px #22300b47;
    --shadow-raised: 0 2px 6px #22300b14, 0 20px 46px -28px #22300b4f;
    --shadow-modal: 0 28px 80px #22300b3d, 0 0 0 1px #22300b0d;
    --overlay: #17200e9e;
  }
}