/* ==========================================================================
   SYMMETRA design tokens — the single source of truth for colour, type,
   spacing, shape, elevation and motion. Every other stylesheet consumes these
   variables; no component hard-codes a colour.

   Palette (2026-10 peak plan H): a vivid indigo-blue primary with violet and cyan
   companions, a deep navy sidebar and tinted surfaces — sharper and more alive, still
   a finance tool. Earlier base: Statiko's cool slate, corrected for a finance app
   (docs/audit/2026-10/4-design-system.md, Part D): text colours pass WCAG AA,
   status colours are used as fills/icons with dedicated -fg text colours,
   negatives use a true red (never brand rose), totals are flat.

   Theme: <html data-theme="light|dark">, set before first paint by the inline
   script at the top of SYMMETRA.html (ported from Vendigoose).
   ========================================================================== */

@layer reset, tokens, base, components, shell, pages, reports, utilities, print;

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

    /* surfaces */
    --bg: #f2f4fb;
    --bg-grad: radial-gradient(1100px 520px at 100% -12%, rgba(76, 92, 255, .10), transparent 60%),
               radial-gradient(900px 480px at -10% 110%, rgba(6, 182, 212, .07), transparent 60%);
    --surface: #ffffff;
    --surface-2: #f6f7fd;
    --surface-3: #edf0fa;
    --surface-overlay: #ffffff;
    --surface-inverse: #101828;
    --scrim: rgba(16, 24, 40, .42);

    /* lines */
    --border-subtle: #eef0f8;
    --border: #e2e6f1;
    --border-strong: #d0d6e6;
    --border-control: #c8cfe0;
    --border-control-hover: #9ea8c6;

    /* text */
    --text: #0d1530;
    --text-2: #333d5c;
    --muted: #5a6585;
    --subtle: #7781a3;
    --text-inverse: #f8fafc;

    /* accent: vivid indigo-blue, with violet and cyan companions for highlights and charts */
    --accent: #4c5cff;
    --accent-hover: #3d4cf2;
    --accent-press: #2f3cd6;
    --accent-fg: #3442e8;
    --accent-soft: #eef0ff;
    --accent-soft-2: #dfe3ff;
    --accent-2: #8b5cf6;
    --accent-3: #06b6d4;
    --on-accent: #ffffff;
    --focus-ring: 0 0 0 3px rgba(76, 92, 255, .30);
    --focus-border: #4c5cff;
    --brand-grad: linear-gradient(135deg, #4c5cff 0%, #7c4dff 55%, #19b6d8 100%);
    --brand-grad-soft: linear-gradient(135deg, rgba(76, 92, 255, .10), rgba(124, 77, 255, .07) 55%, rgba(25, 182, 216, .07));
    --button-grad: linear-gradient(180deg, #5d6bff 0%, #4c5cff 100%);

    /* sidebar: deep navy in both themes */
    --sidebar-bg: #0e1330;
    --sidebar-bg-2: #141a3d;
    --sidebar-fg: #c7cdf2;
    --sidebar-title: #ffffff;
    --sidebar-muted: #7d86b6;
    --sidebar-hover: rgba(255, 255, 255, .06);
    --sidebar-active: rgba(110, 124, 255, .20);
    --sidebar-border: rgba(255, 255, 255, .08);

    /* status: base = fills & icons, -fg = text, -soft = tinted background */
    --success: #16a34a; --success-soft: #e3f8ea; --success-fg: #166534; --success-line: #b7e4c7;
    --warning: #d97706; --warning-soft: #fdf2dc; --warning-fg: #92400e; --warning-line: #f3d79b;
    --danger:  #e5484d; --danger-soft:  #fdecec; --danger-fg:  #b42318; --danger-line:  #f5c2c4;
    --info:    #0ea5e9; --info-soft:    #e3f4fd; --info-fg:    #075985; --info-line:    #b6e0f5;
    --neutral-soft: #eef1f7; --neutral-fg: #344054; --neutral-line: #dde3ec;

    /* finance roles */
    --amount: var(--text);
    --amount-negative: #b42318;
    --amount-positive-delta: #067647;
    --amount-zero: var(--subtle);
    --row-hover: #f6f7fe;
    --row-selected: var(--accent-soft);
    --row-subtotal: #f6f7fd;
    --row-total: #edf0fa;
    --rule-total: #0d1530;

    /* elevation (light: soft shadows; dark: lighter surface + border) */
    --elev-1: 0 1px 2px rgba(13, 21, 48, .05), 0 1px 1px rgba(13, 21, 48, .03);
    --elev-2: 0 8px 20px -6px rgba(13, 21, 48, .12), 0 2px 4px -2px rgba(13, 21, 48, .06);
    --elev-3: 0 24px 48px -12px rgba(13, 21, 48, .24), 0 4px 10px -4px rgba(13, 21, 48, .08);
    --glow: 0 0 0 1px rgba(76, 92, 255, .14), 0 8px 24px -8px rgba(76, 92, 255, .35);
    --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .6);

    /* type */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    --fw-regular: 450;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 680;
    --text-2xs: 11px; --lh-2xs: 16px;
    --text-xs: 12px;  --lh-xs: 16px;
    --text-sm: 13px;  --lh-sm: 20px;
    --text-md: 14px;  --lh-md: 20px;
    --text-lg: 16px;  --lh-lg: 24px;
    --text-xl: 20px;  --lh-xl: 28px;
    --text-2xl: 24px; --lh-2xl: 32px;
    --text-3xl: 30px; --lh-3xl: 36px;
    --tracking-tight: -0.011em;
    --tracking-tighter: -0.02em;
    --tracking-caps: 0.06em;

    /* spacing (4px grid) */
    --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px;
    --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
    --space-10: 40px; --space-12: 48px; --space-16: 64px;

    /* sizes */
    --control-sm: 28px;
    --control-md: 32px;
    --control-lg: 36px;
    --row-h: 34px;
    --row-h-compact: 30px;
    --sidebar-w: 236px;
    --page-pad: 24px;
    --content-max: 1480px;

    /* shape */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* motion */
    --dur-1: 80ms; --dur-2: 140ms; --dur-3: 200ms; --dur-4: 280ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);

    /* stacking */
    --z-sticky: 10; --z-sidebar: 20; --z-header: 30; --z-dropdown: 40; --z-overlay: 50;
    --z-modal: 60; --z-toast: 70; --z-tooltip: 80; --z-gate: 90;

    /* charts (accent, teal, amber, slate, violet) */
    --chart-1: #4c5cff; --chart-2: #06b6d4; --chart-3: #f59e0b; --chart-4: #8b5cf6; --chart-5: #10b981;
  }

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

    --bg: #070a16;
    --bg-grad: radial-gradient(1100px 600px at 100% -12%, rgba(107, 123, 255, .12), transparent 60%),
               radial-gradient(900px 500px at -10% 110%, rgba(6, 182, 212, .07), transparent 60%);
    --surface: #0e1224;
    --surface-2: #12172b;
    --surface-3: #181e36;
    --surface-overlay: #141a30;
    --surface-inverse: #e8ecf3;
    --scrim: rgba(0, 0, 0, .62);

    --border-subtle: #171c31;
    --border: #20263f;
    --border-strong: #2c3352;
    --border-control: #333b5c;
    --border-control-hover: #4b5580;

    --text: #e8ecf3;
    --text-2: #c3cad6;
    --muted: #98a2b3;
    --subtle: #727d91;
    --text-inverse: #0a0d13;

    --accent: #6b7bff;
    --accent-hover: #8290ff;
    --accent-press: #5565f0;
    --accent-fg: #a9b3ff;
    --accent-soft: rgba(107, 123, 255, .16);
    --accent-soft-2: rgba(107, 123, 255, .26);
    --accent-2: #a78bfa;
    --accent-3: #22d3ee;
    --on-accent: #ffffff;
    --focus-ring: 0 0 0 3px rgba(130, 144, 255, .42);
    --focus-border: #8290ff;
    --brand-grad: linear-gradient(135deg, #6b7bff 0%, #9b6bff 55%, #22c3e6 100%);
    --brand-grad-soft: linear-gradient(135deg, rgba(107, 123, 255, .16), rgba(155, 107, 255, .10) 55%, rgba(34, 195, 230, .10));
    --button-grad: linear-gradient(180deg, #7a89ff 0%, #6b7bff 100%);
    --sidebar-bg: #090d1f;
    --sidebar-bg-2: #0f1430;
    --sidebar-border: rgba(255, 255, 255, .06);

    --success: #3ecf74; --success-soft: rgba(62, 207, 116, .12); --success-fg: #6ee7a0; --success-line: rgba(62, 207, 116, .30);
    --warning: #f5b83d; --warning-soft: rgba(245, 184, 61, .12); --warning-fg: #fcd34d; --warning-line: rgba(245, 184, 61, .30);
    --danger:  #f26d74; --danger-soft:  rgba(242, 109, 116, .12); --danger-fg:  #ff8a80; --danger-line:  rgba(242, 109, 116, .32);
    --info:    #4cc2f5; --info-soft:    rgba(76, 194, 245, .12); --info-fg:    #9bdcfb; --info-line:    rgba(76, 194, 245, .30);
    --neutral-soft: #1a202b; --neutral-fg: #c3cad6; --neutral-line: #2d3544;

    --amount-negative: #ff8a80;
    --amount-positive-delta: #4ade80;
    --row-hover: #141922;
    --row-subtotal: #141922;
    --row-total: #1a202b;
    --rule-total: #c3cad6;

    --elev-1: 0 0 0 1px rgba(255, 255, 255, .02);
    --elev-2: 0 10px 28px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
    --elev-3: 0 28px 64px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05);
    --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, .04);

    --chart-1: #8290ff; --chart-2: #22d3ee; --chart-3: #fbbf24; --chart-4: #a78bfa; --chart-5: #34d399;
    --glow: 0 0 0 1px rgba(130, 144, 255, .22), 0 8px 28px -8px rgba(107, 123, 255, .5);
  }

  @media (pointer: coarse) {
    :root { --control-md: 38px; --control-sm: 34px; }
  }
  @media (max-width: 640px) {
    :root { --page-pad: 16px; }
  }
}