/* ============================================================
   Design tokens — UI refresh v2 (single source of truth).
   Loaded before app.css. Values copied from the mockups
   (docs/tickets-redesign-mockup-v2.html). The compat block at
   the bottom aliases the pre-refresh token names so existing
   component CSS keeps working (and gains dark mode) while pages
   are migrated milestone by milestone.
   ============================================================ */

/* ---- Self-hosted Geist (OFL). No Google Fonts hotlink (GDPR). ---- */
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Animated angle for the sign-in card's rotating conic-gradient border. */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    --bg: #f2f3f7;
    --blob-1: rgba(91, 91, 214, .18);
    --blob-2: rgba(56, 146, 255, .13);
    --blob-3: rgba(217, 91, 214, .10);
    --glass: rgba(255, 255, 255, .72);
    --glass-border: rgba(21, 24, 31, .08);
    --panel-2: rgba(21, 24, 31, .035);
    --panel-solid: #ffffff;
    --input-bg: rgba(255, 255, 255, .6);
    --sidebar: #0e1017;
    --sidebar-text: #98a1b4;
    --border: rgba(21, 24, 31, .09);
    --border-strong: rgba(21, 24, 31, .16);
    --text: #14171e;
    --text-2: #565f6e;
    --text-3: #8a92a2;
    --accent: #5b5bd6;
    --accent-strong: #4a4ac4;
    --accent-soft: rgba(91, 91, 214, .11);
    --accent-ring: rgba(91, 91, 214, .25);
    --new: #3178f6;    --new-soft: rgba(49, 120, 246, .12);
    --dev: #8b5cf6;    --dev-soft: rgba(139, 92, 246, .13);
    --uat: #f59e0b;    --uat-soft: rgba(245, 158, 11, .15);
    --done: #10b981;   --done-soft: rgba(16, 185, 129, .13);
    --paused: #64748b; --paused-soft: rgba(100, 116, 139, .14);
    --crit: #ef4444;   --high: #f97316; --med: #3178f6;
    --shadow-1: 0 1px 2px rgba(14, 16, 23, .05), 0 6px 20px rgba(14, 16, 23, .06);
    --shadow-2: 0 4px 8px rgba(14, 16, 23, .07), 0 16px 40px rgba(14, 16, 23, .13);
    --radius: 14px;
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --smooth: cubic-bezier(.16, 1, .3, 1);
    --font-ui: 'Geist', 'Inter', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, Consolas, monospace;
    color-scheme: light;

    /* ---- compat aliases (pre-refresh names) ---- */
    --brand: var(--accent);
    --brand-hover: var(--accent-strong);
    --brand-soft: var(--accent-soft);
    --muted: var(--text-2);
    --shadow: var(--shadow-1);
    --shadow-md: var(--shadow-2);
    --radius-sm: 8px;
    --surface: var(--panel-solid);
    --surface-2: #eceff5;
    --sidebar-2: #1a2030;
}

[data-theme="dark"] {
    --bg: #0a0c12;
    --blob-1: rgba(99, 91, 255, .20);
    --blob-2: rgba(35, 120, 255, .13);
    --blob-3: rgba(190, 70, 220, .10);
    --glass: rgba(19, 22, 32, .66);
    --glass-border: rgba(255, 255, 255, .075);
    --panel-2: rgba(255, 255, 255, .04);
    --panel-solid: #161a24;
    --input-bg: rgba(255, 255, 255, .05);
    --sidebar: rgba(8, 10, 16, .85);
    --sidebar-text: #7d879c;
    --border: rgba(255, 255, 255, .075);
    --border-strong: rgba(255, 255, 255, .15);
    --text: #eceef5;
    --text-2: #9aa3b8;
    --text-3: #606a82;
    --accent: #7d7df2;
    --accent-strong: #9a9aff;
    --accent-soft: rgba(125, 125, 242, .15);
    --accent-ring: rgba(125, 125, 242, .32);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-2: 0 4px 10px rgba(0, 0, 0, .45), 0 20px 50px rgba(0, 0, 0, .55);
    color-scheme: dark;

    /* ---- compat solids for dark ---- */
    --surface-2: #1c2130;
    --sidebar-2: #141824;
}