/* ============================================================================
   SnappyCards Design System — Tokens
   ============================================================================

   Source of truth for every UI value: colors, typography, spacing, radii,
   shadows, motion. All page styles consume these via CSS custom properties.

   Rules:
   - NO gradients (per 2026-05-13 design directive)
   - Solid brand color: --color-primary-600 (#7c3aed)
   - Slate neutrals + Violet brand
   - Inter typography
   - 4-base spacing scale
   - Subtle layered shadows (no harsh drop shadows)

   Use:
     <link rel="stylesheet" href="/design-system/tokens.css">
     <link rel="stylesheet" href="/design-system/components.css">

   See: design-system/README.md
   ========================================================================== */

:root {
    /* ─── Brand color (Violet scale) ─────────────────────────────── */
    --color-primary-50:  #f5f3ff;
    --color-primary-100: #ede9fe;
    --color-primary-200: #ddd6fe;
    --color-primary-300: #c4b5fd;
    --color-primary-400: #a78bfa;
    --color-primary-500: #8b5cf6;
    --color-primary-600: #7c3aed; /* default brand */
    --color-primary-700: #6d28d9; /* hover */
    --color-primary-800: #5b21b6;
    --color-primary-900: #4c1d95;

    /* ─── Neutrals (Slate scale) ─────────────────────────────────── */
    --color-neutral-0:   #ffffff;
    --color-neutral-50:  #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;

    /* ─── Semantic colors ────────────────────────────────────────── */
    --color-success-50:  #ecfdf5;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;

    --color-warning-50:  #fffbeb;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;
    --color-warning-700: #b45309;

    --color-danger-50:   #fff1f2;
    --color-danger-500:  #f43f5e;
    --color-danger-600:  #e11d48;
    --color-danger-700:  #be123c;

    --color-info-50:     #f0f9ff;
    --color-info-500:    #0ea5e9;
    --color-info-600:    #0284c7;
    --color-info-700:    #0369a1;

    /* ─── Surface aliases (light theme default) ──────────────────── */
    --surface-page:      var(--color-neutral-50);    /* page background */
    --surface-elevated:  var(--color-neutral-0);     /* card / modal bg */
    --surface-subtle:    var(--color-neutral-100);   /* hover state, dividers */
    --surface-overlay:   rgba(15, 23, 42, 0.5);      /* modal backdrop */

    /* ─── Text aliases ───────────────────────────────────────────── */
    --text-strong:       var(--color-neutral-900);   /* h1 / hero */
    --text-default:      var(--color-neutral-800);   /* body */
    --text-muted:        var(--color-neutral-500);   /* secondary */
    --text-faint:        var(--color-neutral-400);   /* placeholders */
    --text-inverted:     var(--color-neutral-0);     /* on primary bg */
    --text-link:         var(--color-primary-600);
    --text-link-hover:   var(--color-primary-700);

    /* ─── Borders ────────────────────────────────────────────────── */
    --border-default:    var(--color-neutral-200);
    --border-strong:     var(--color-neutral-300);
    --border-focus:      var(--color-primary-600);

    /* ─── Typography ─────────────────────────────────────────────── */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                         Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: ui-monospace, 'SF Mono', 'Cascadia Code',
                         'Roboto Mono', Menlo, Consolas, monospace;

    /* Type scale (clamp() optional later for fluid) */
    --font-size-xs:   12px;
    --font-size-sm:   13px;
    --font-size-base: 14px;
    --font-size-md:   15px;
    --font-size-lg:   16px;
    --font-size-xl:   18px;
    --font-size-2xl:  20px;
    --font-size-3xl:  24px;
    --font-size-4xl:  30px;
    --font-size-5xl:  36px;
    --font-size-6xl:  48px;

    --line-height-tight:   1.2;
    --line-height-snug:    1.35;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.65;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --letter-spacing-tight:  -0.02em;
    --letter-spacing-snug:   -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.04em;
    --letter-spacing-wider:  0.08em;

    /* ─── Spacing scale (4px base) ───────────────────────────────── */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ─── Border radius ──────────────────────────────────────────── */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-3xl:  20px;
    --radius-full: 9999px;

    /* ─── Shadows (soft, layered — no harsh drops) ───────────────── */
    --shadow-xs:    0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-sm:    0 2px 4px rgb(15 23 42 / 0.05), 0 1px 2px rgb(15 23 42 / 0.03);
    --shadow-md:    0 4px 8px rgb(15 23 42 / 0.06), 0 2px 4px rgb(15 23 42 / 0.04);
    --shadow-lg:    0 10px 20px rgb(15 23 42 / 0.08), 0 4px 8px rgb(15 23 42 / 0.05);
    --shadow-xl:    0 20px 40px rgb(15 23 42 / 0.10), 0 8px 16px rgb(15 23 42 / 0.06);
    --shadow-focus: 0 0 0 3px rgb(124 58 237 / 0.15);
    --shadow-danger-focus: 0 0 0 3px rgb(225 29 72 / 0.15);

    /* ─── Motion ─────────────────────────────────────────────────── */
    --duration-fast:    100ms;
    --duration-base:    150ms;
    --duration-slow:    250ms;
    --easing-standard:  cubic-bezier(0.2, 0, 0, 1);
    --easing-emphasize: cubic-bezier(0.3, 0, 0.1, 1);

    /* ─── Layout ─────────────────────────────────────────────────── */
    --container-narrow: 640px;
    --container-base:   960px;
    --container-wide:   1200px;
    --container-full:   100%;

    --z-base:    1;
    --z-dropdown: 50;
    --z-sticky:   100;
    --z-modal:    1000;
    --z-toast:    1100;
}

/* ─── Dark theme override (toggle via data-theme="dark" on <html>) ─ */
:root[data-theme="dark"] {
    --surface-page:     var(--color-neutral-900);
    --surface-elevated: var(--color-neutral-800);
    --surface-subtle:   var(--color-neutral-700);
    --surface-overlay:  rgba(0, 0, 0, 0.6);

    --text-strong:      var(--color-neutral-0);
    --text-default:     var(--color-neutral-100);
    --text-muted:       var(--color-neutral-400);
    --text-faint:       var(--color-neutral-500);
    --text-inverted:    var(--color-neutral-900);
    --text-link:        var(--color-primary-400);
    --text-link-hover:  var(--color-primary-300);

    --border-default:   var(--color-neutral-700);
    --border-strong:    var(--color-neutral-600);

    --shadow-xs:    0 1px 2px rgb(0 0 0 / 0.20);
    --shadow-sm:    0 2px 4px rgb(0 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.15);
    --shadow-md:    0 4px 8px rgb(0 0 0 / 0.30), 0 2px 4px rgb(0 0 0 / 0.20);
    --shadow-lg:    0 10px 20px rgb(0 0 0 / 0.40), 0 4px 8px rgb(0 0 0 / 0.25);
    --shadow-xl:    0 20px 40px rgb(0 0 0 / 0.50), 0 8px 16px rgb(0 0 0 / 0.30);
}

/* ─── Base reset + typography defaults ───────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    /* Always have system colors on the html element so Lighthouse contrast
       checks see them even before page styles load. */
    background: var(--surface-page);
    color: var(--text-default);
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-default);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--text-strong);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-snug);
}

h1 {
    font-size: var(--font-size-4xl);
    letter-spacing: var(--letter-spacing-tight);
}
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); }
h4 { font-size: var(--font-size-xl);  font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--font-size-md);  font-weight: var(--font-weight-semibold); }

p {
    margin: 0 0 var(--space-3);
    color: var(--text-default);
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--duration-base) var(--easing-standard);
}
a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

::placeholder {
    color: var(--text-faint);
}

:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Utility helpers — sparingly used; prefer components.css */
.text-muted { color: var(--text-muted); }
.text-strong { color: var(--text-strong); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-mono { font-family: var(--font-family-mono); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}