/* ============================================================
   DESIGN TOKENS — light-dark() + color-scheme
   ============================================================ */

:root {
    color-scheme: light dark;
    interpolate-size: allow-keywords;

    /* Brand — terracota (light) / cyan electric (dark) */
    --color-primary: light-dark(#c1694f, #22d3ee);
    --color-primary-hover: light-dark(#a34f3a, #67e8f9);

    /* Surfaces — parchment (light) / blue-charcoal (dark) */
    --color-bg: light-dark(#f5f0e6, #0b0e14);
    --color-surface: light-dark(#fbf8f2, #141a24);
    --color-surface-2: light-dark(#f2efe6, #192333);
    --color-surface-offset: light-dark(#ede4d0, #0e1319);

    /* Lines */
    --color-border: light-dark(#d3c4a0, #28323f);

    /* Text — warm brown (light) / cool gray (dark) */
    --color-text: light-dark(#2e2820, #e6eaf0);
    --color-text-muted: light-dark(#5c5240, #a0acbe);
    --color-text-faint: light-dark(#8a7e68, #6b7686);

    /* Status */
    --color-success: light-dark(#3d5e24, #2dd4bf);
    --color-success-hi: light-dark(#d6e7c5, #0f2c33);
    --color-danger: light-dark(#b33f32, #f87171);

    /* Canvas grid */
    --grid-line: light-dark(rgba(46, 40, 32, 0.05), rgba(230, 234, 240, 0.04));

    /* Shadows — warm (light) / deep black (dark) */
    --shadow-md: 0 4px 12px
        light-dark(rgba(46, 40, 32, 0.1), 0 4px 16px rgba(0, 0, 0, 0.5));
    --shadow-lg: light-dark(
        0 12px 32px rgba(46, 40, 32, 0.14),
        0 12px 32px rgba(0, 0, 0, 0.55)
    );

    /* Focus ring — glow instead of outline (cyan / terracota) */
    --focus-ring: light-dark(
        0 0 0 3px rgba(193, 105, 79, 0.25),
        0 0 0 3px rgba(34, 211, 238, 0.25)
    );

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Typography */
    --font-body: system-ui, sans-serif;
    --font-mono: monospace;
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 160ms var(--ease-out);
    --transition-slow: 280ms var(--ease-out);

    /* Layout */
    --rail-width: 56px;
    --panel-gap: 8px;
    --panel-width: 25dvw; /* default value, overridden by JS on restore */
    --panel-min-w: 240px; /* resize minimum */
    --panel-max-w: 60dvw; /* resize maximum */
}

/* data-theme (set by JS) controls which color scheme to use */
:root[data-theme="dark"] {
    color-scheme: dark;
}
:root[data-theme="light"] {
    color-scheme: light;
}