/* ============================================================================
   Vanishly — design tokens
   Single source of truth for visual primitives. Edit values here; every
   surface picks them up. NEVER hardcode colours or sizes in component CSS.
   ============================================================================ */

:root {

    /* ---- brand & accent ---------------------------------------------- */

    --color-brand-primary:        #2d3e50;
    --color-brand-primary-deep:   #1f2c39;
    --color-brand-primary-soft:   rgba(45, 62, 80, 0.08);
    --color-brand-primary-line:   rgba(45, 62, 80, 0.14);

    --color-accent:               #b5552e;   /* terracotta — warm, distinct, accessible */
    --color-accent-deep:          #8e4322;
    --color-accent-soft:          rgba(181, 85, 46, 0.10);

    /* ---- surfaces & text --------------------------------------------- */

    --color-surface:              #fafaf9;
    --color-surface-raised:       #ffffff;
    --color-surface-sunken:       #f3f2ee;
    --color-surface-inverse:      #1a232e;

    --color-text:                 #1f2937;
    --color-text-muted:           #6b7280;
    --color-text-dim:             #9ca3af;
    --color-text-inverse:         #ffffff;

    --color-line:                 #e5e4df;
    --color-line-subtle:          #efeeea;
    --color-line-strong:          #d6d5cd;

    /* ---- semantic ---------------------------------------------------- */

    --color-success:              #2d6a4f;
    --color-success-soft:         rgba(45, 106, 79, 0.10);
    --color-warning:              #b45309;
    --color-warning-soft:         rgba(180, 83, 9, 0.10);
    --color-danger:               #9f1239;
    --color-danger-soft:          rgba(159, 18, 57, 0.10);
    --color-info:                 #1e40af;
    --color-info-soft:            rgba(30, 64, 175, 0.10);

    --color-focus-ring:           rgba(45, 62, 80, 0.22);
    --color-selection:            rgba(181, 85, 46, 0.22);

    /* ---- typography -------------------------------------------------- */

    --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --text-xs:       11px;
    --text-sm:       13px;
    --text-base:     15px;
    --text-md:       17px;
    --text-lg:       21px;
    --text-xl:       26px;
    --text-2xl:      34px;
    --text-3xl:      46px;

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-base:   1.55;
    --leading-loose:  1.75;

    --tracking-hero:    -0.025em;
    --tracking-tight:   -0.015em;
    --tracking-snug:    -0.005em;
    --tracking-normal:  0;
    --tracking-wide:    0.06em;

    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;

    /* ---- spacing (4px base) ------------------------------------------ */

    --space-0:    0;
    --space-1:    4px;
    --space-2:    8px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    24px;
    --space-6:    32px;
    --space-7:    48px;
    --space-8:    64px;
    --space-9:    96px;
    --space-10:   128px;

    /* ---- radii ------------------------------------------------------- */

    --radius-xs:    3px;
    --radius-sm:    6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 9999px;

    /* ---- shadows (restrained, layered, never floaty) ----------------- */

    --shadow-sm:    0 1px 1px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:    0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-lg:    0 6px 16px rgba(15, 23, 42, 0.06), 0 16px 36px rgba(15, 23, 42, 0.07);
    --shadow-focus: 0 0 0 3px var(--color-focus-ring);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* ---- motion ------------------------------------------------------ */

    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:     cubic-bezier(0.32, 0, 0.67, 0);

    --motion-fast:        120ms;
    --motion-base:        200ms;
    --motion-slow:        320ms;
    --motion-deliberate:  500ms;

    /* ---- layout ------------------------------------------------------ */

    --container-narrow:   480px;
    --container-base:     720px;
    --container-wide:    1080px;
    --container-full:    1280px;

    --z-base:      1;
    --z-raised:    10;
    --z-overlay:   100;
    --z-modal:     1000;
    --z-toast:     10000;
}

/* Honour OS-level reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}