/* Blinqx design tokens — derived from design/blinqx_design_system.html
   Use these variables everywhere instead of hard-coded colors/spacing/type.
   ------------------------------------------------------------------ */

:root {
    /* ── Palette ── */
    --yellow-025: #FEF9E4;
    --yellow-100: #FFE680;
    --yellow-400: #FFD21C;
    --yellow-500: #FFCD00;

    --teal-025:  #F0F6F8;
    --teal-050:  #E2EDF1;
    --teal-100:  #D3E4EA;
    --teal-200:  #C5DBE3;
    --teal-300:  #8AB8C7;
    --teal-400:  #6DA6B9;
    --teal-500:  #316A7D;
    --teal-900:  #000C35;

    --ink-100:   #DBDBDB;
    --ink-300:   #D2D4D6;
    --ink-500:   #777D84;
    --ink-700:   #4A515B;
    --ink-900:   #1D2632;

    --danger-050: #F6DEDE;
    --danger-200: #EDBCBC;
    --danger-500: #D15858;
    --danger-700: #951C1C;

    --success-050: #CDF0EA;
    --warning-050: #FEF9E4;

    /* ── Semantic surfaces ── */
    --surface-page:   #F4F7F9;
    --surface-card:   #FFFFFF;
    --surface-raised: #EFF2F7;

    /* ── Semantic foreground/background aliases ── */
    --fg-1: var(--ink-900);
    --fg-2: var(--ink-700);
    --fg-3: var(--ink-500);
    --fg-brand:  var(--teal-500);
    --fg-danger: var(--danger-500);
    --fg-on-yellow: var(--ink-900);

    --bg-1:        var(--surface-page);
    --bg-2:        var(--surface-card);
    --bg-3:        var(--surface-raised);
    --bg-band:     var(--teal-050);
    --bg-selected: var(--yellow-025);

    --border-subtle: var(--teal-200);
    --border-strong: var(--ink-300);
    --border-brand:  var(--yellow-400);

    --accent:       var(--yellow-400);
    --accent-press: var(--yellow-500);

    --scrim: rgba(0, 12, 53, 0.35);

    /* ── Type ── */
    --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
    --font-ui:      'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
    --font-hand:    'Caveat', cursive;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-10: 10px;
    --text-12: 12px;
    --text-14: 14px;
    --text-16: 16px;
    --text-20: 20px;
    --text-22: 22px;
    --text-28: 28px;
    --text-32: 32px;
    --text-40: 40px;
    --text-56: 56px;
    --text-64: 64px;
    --text-80: 80px;

    --lh-tight:  1.1;
    --lh-snug:   1.25;
    --lh-ui:     1.43;
    --lh-normal: 1.4;

    /* ── Spacing scale ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ── Radii ── */
    --radius-0:    0;
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.18);

    /* ── Motion ── */
    --dur-fast: 150ms;
    --dur-med:  200ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}