/* ===========================================================================
   Design tokens from the Stitch redesign.

     light  -> "Editorial Precision"  porcelain surfaces, electric cyan
     dark   -> "Obsidian Kinetic"     obsidian surfaces, hyper cyan + mint

   These plug into the theme switch the app already has: light values live on
   :root, dark values on .dark, which the toggle puts on the root element.

   Named with a ds- prefix so nothing here collides with the existing
   --color-* tokens while both are in use.
   =========================================================================== */

:root {
    /* surfaces - porcelain, stepping down for wells and insets */
    --ds-canvas:            #F8F9FB;
    --ds-canvas-sunk:       #F1F3F7;
    --ds-surface:           #FFFFFF;
    --ds-surface-hover:     #F8FAFC;
    --ds-overlay:           #FFFFFF;

    /* ink */
    --ds-text:              #0D1117;
    --ds-text-muted:        #4E5A69;   /* 6.3:1 on the sunk surface */
    --ds-text-dim:          #64748B;   /* 4.5:1 on canvas; was #94A3B8 at 2.4:1 */

    /* hairlines - deliberately faint; structure without heavy outlines */
    --ds-stroke:            rgba(13, 17, 23, 0.06);
    --ds-stroke-strong:     rgba(13, 17, 23, 0.10);
    --ds-stroke-hover:      rgba(14, 165, 233, 0.35);

    /* accents */
    --ds-primary:           #0EA5E9;
    --ds-primary-strong:    #0284C7;
    --ds-on-primary:        #FFFFFF;
    --ds-secondary:         #10B981;
    --ds-tertiary:          #6366F1;

    /* semantic - separate from the accent hue on purpose */
    --ds-good:              #059669;
    --ds-good-bg:           rgba(16, 185, 129, 0.08);
    --ds-warn:              #D97706;
    --ds-warn-bg:           rgba(245, 158, 11, 0.08);
    --ds-bad:               #DC2626;
    --ds-bad-bg:            rgba(239, 68, 68, 0.08);
    --ds-info-bg:           rgba(14, 165, 233, 0.08);

    /* depth - light dispersion rather than heavy drop shadows */
    --ds-shadow-1:          0 1px 3px rgba(15, 23, 42, 0.02);
    --ds-shadow-2:          0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
    --ds-shadow-3:          0 20px 48px -8px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ds-focus-ring:        0 0 0 3px rgba(14, 165, 233, 0.16);
    --ds-card-sheen:        none;

    /* shape - crisp, architectural */
    --ds-radius-sm:         4px;
    --ds-radius:            6px;
    --ds-radius-card:       8px;
    --ds-radius-lg:         12px;
    --ds-radius-pill:       9999px;

    /* rhythm - 4/8px baseline */
    --ds-space-xs:          0.25rem;
    --ds-space-sm:          0.5rem;
    --ds-space-md:          1rem;
    --ds-space-lg:          1.5rem;
    --ds-space-xl:          2.5rem;
    --ds-gutter:            1.5rem;
    --ds-margin:            2.5rem;
    --ds-max-width:         1440px;

    /* type */
    --ds-font-display:      'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --ds-font-body:         'Inter', ui-sans-serif, system-ui, sans-serif;
    --ds-font-mono:         'JetBrains Mono', ui-monospace, monospace;
}

.dark {
    /* surfaces - obsidian, lit by edges rather than ambient light */
    --ds-canvas:            #080B10;
    --ds-canvas-sunk:       #0B0E13;
    --ds-surface:           #0D121B;
    --ds-surface-hover:     rgba(21, 29, 42, 0.85);
    --ds-overlay:           #151D2A;

    --ds-text:              #F8FAFC;
    --ds-text-muted:        #A8B4C4;   /* 8.6:1 on the card surface */
    --ds-text-dim:          #8494A8;   /* 6.1:1; was #475569 at 2.5:1 */

    --ds-stroke:            rgba(255, 255, 255, 0.08);
    --ds-stroke-strong:     rgba(255, 255, 255, 0.14);
    --ds-stroke-hover:      rgba(0, 242, 254, 0.35);

    --ds-primary:           #00F2FE;
    --ds-primary-strong:    #00DCE6;
    --ds-on-primary:        #080B10;
    --ds-secondary:         #10E5A5;
    --ds-tertiary:          #6366F1;

    --ds-good:              #10E5A5;
    --ds-good-bg:           rgba(16, 229, 165, 0.10);
    --ds-warn:              #F59E0B;
    --ds-warn-bg:           rgba(245, 158, 11, 0.10);
    --ds-bad:               #F43F5E;
    --ds-bad-bg:            rgba(244, 63, 94, 0.10);
    --ds-info-bg:           rgba(0, 242, 254, 0.10);

    --ds-shadow-1:          0 1px 2px rgba(0, 0, 0, 0.4);
    --ds-shadow-2:          0 0 24px -6px rgba(0, 242, 254, 0.12);
    --ds-shadow-3:          0 20px 40px -15px rgba(0, 0, 0, 0.7);
    --ds-focus-ring:        0 0 0 3px rgba(0, 242, 254, 0.15);
    /* the faint top-left sheen that makes dark cards read as milled metal */
    --ds-card-sheen:        linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%);

    --ds-radius-sm:         4px;
    --ds-radius:            8px;
    --ds-radius-card:       12px;
    --ds-radius-lg:         16px;

    --ds-gutter:            1.25rem;
    --ds-margin:            2rem;

    --ds-font-body:         'DM Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Numbers that sit in columns must not jitter as live data updates. */
.ds-num,
.ds-metric,
.ds-table td {
    font-variant-numeric: tabular-nums;
}