/* Streaka design tokens.
   Colours use light-dark(): the active scheme comes from color-scheme, which is driven by
   data-theme="auto|light|dark" on <html> (and may be overridden on any subtree, e.g. the style guide). */
@layer reset, tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* ---- Brand ---- */
    --brand: light-dark(#e5b010, #f0c030); /* gold; buttons use dark text (--on-brand), never white */
    --brand-hover: light-dark(#edbc20, #f5cb4a);
    --brand-press: light-dark(#d6a208, #e3b020);
    --on-brand: #241800;
    --brand-soft: light-dark(#fff3c4, #3d3315);
    --brand-text: light-dark(#7a5800, #f2c94c); /* gold as text/link: bronze on light, light gold on dark (>= 4.5:1) */
    --brand-edge: light-dark(#9a7300, #f0c030); /* gold outlines and thin marks (>= 3:1 on every surface) */
    --flame-1: #c77d0a; /* flame base: deep amber */
    --flame-2: #f0b90b; /* flame body: gold */
    --flame-3: #fff0b0; /* flame core: pale gold */
    --flame-line: #ffd966; /* flame outline: light gold */

    /* ---- Neutrals / surfaces ---- */
    --bg: light-dark(#faf8f6, #1c1f26);
    --surface: light-dark(#ffffff, #262a33);
    --surface-2: light-dark(#f4f0ec, #2f343e);
    --surface-3: light-dark(#ebe5df, #3a404b);
    --overlay: light-dark(rgb(24 16 12 / 0.5), rgb(8 10 14 / 0.66));
    --text: light-dark(#1d1917, #f2f4f7);
    --text-muted: light-dark(#5d544e, #b9c0cc);
    --text-subtle: light-dark(#6f655e, #a8b0bd);
    --border: light-dark(#e7e0d9, #454c59);
    --border-strong: light-dark(#8c8179, #8b94a3); /* >= 3:1 on bg, surface and surface-2 (WCAG 1.4.11): input, chip and button outlines */
    --focus: light-dark(#1f4fe0, #8fb2ff);

    /* ---- Status ---- */
    --success: light-dark(#1b8a4c, #3ecf7b);
    --success-soft: light-dark(#e5f6ec, #1b3a2a);
    --success-text: light-dark(#156b3b, #5be08f);
    --warning: light-dark(#c2410c, #fb923c); /* orange, clearly apart from brand gold; always paired with an icon or label */
    --warning-soft: light-dark(#ffeddc, #43240f);
    --warning-text: light-dark(#9a3412, #fdba74);
    --danger: light-dark(#d1322b, #ff6b63);
    --danger-soft: light-dark(#fde8e6, #46211f);
    --danger-text: light-dark(#a8231d, #ff8f88);
    --info: light-dark(#2563c9, #6ea5ff);
    --info-soft: light-dark(#e6efff, #1c2f4d);
    --info-text: light-dark(#1b4ea3, #8fb8ff);

    /* ---- Spacing (4px scale) ---- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-20: 5rem;

    /* ---- Radii ---- */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* ---- Shadows ---- */
    --shadow-color: light-dark(rgb(48 28 16 / 0.1), rgb(6 8 12 / 0.55));
    --shadow-1: 0 1px 2px var(--shadow-color), 0 1px 1px var(--shadow-color);
    --shadow-2: 0 4px 12px -2px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
    --shadow-3: 0 16px 40px -8px var(--shadow-color), 0 4px 12px -4px var(--shadow-color);
    --glow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent), 0 8px 24px -6px color-mix(in srgb, var(--brand) 50%, transparent);

    /* ---- Typography (fluid) ---- */
    --font-sans: system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
    --fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
    --fs-base: clamp(0.9375rem, 0.91rem + 0.13vw, 1rem);
    --fs-md: clamp(1.0625rem, 1.03rem + 0.2vw, 1.1875rem);
    --fs-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.875rem);
    --fs-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
    --fs-display: clamp(5rem, 3.2rem + 9vw, 9rem);
    --lh-tight: 1.1;
    --lh-snug: 1.3;
    --lh-base: 1.55;

    /* ---- Motion ---- */
    --dur-fast: 150ms;
    --dur: 200ms;
    --dur-slow: 250ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

    /* ---- Layers ---- */
    --z-nav: 20;
    --z-top: 30;
    --z-menu: 40;
    --z-dialog: 50;
    --z-toast: 60;

    /* ---- Layout ---- */
    --nav-h: 4rem;
    --topbar-h: 3.5rem;
    --sidebar-w: 15.5rem;
    --content-w: 46rem;
    --tap: 2.75rem; /* 44px minimum touch target */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-inline-start: env(safe-area-inset-left, 0px);
    --safe-inline-end: env(safe-area-inset-right, 0px);
  }

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