/* ============================================================
   QuikSnap Design Tokens
   - Warm cream/amber palette
   - Light, dark, and auto (prefers-color-scheme)
   - All values via CSS custom properties — never hardcoded
   ============================================================ */

/* ---- Fonts ----
   NOTE: Local font files were not available; using Google Fonts CDN.
   Replace this @import with @font-face rules pointing at fonts/*.woff2
   once you ship the licensed copies. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   COLOR — light mode (default)
   ============================================================ */
:root {
  /* --- Warm neutrals (the "paper" palette) --- */
  --bg:                 oklch(97.5% 0.012 70);   /* page bg, warm cream */
  --bg-elevated:        oklch(99% 0.008 70);     /* elevated panel bg */
  --surface:            oklch(99.2% 0.006 70);   /* card surface */
  --surface-hover:      oklch(96.5% 0.014 65);   /* card hover */
  --surface-sunken:     oklch(95% 0.018 65);     /* inset / pressed */

  /* --- Text --- */
  --fg:                 oklch(22% 0.02 50);      /* primary text, warm near-black */
  --fg-muted:           oklch(45% 0.018 55);     /* secondary text */
  --fg-subtle:          oklch(60% 0.014 60);     /* tertiary, captions */
  --fg-inverse:         oklch(98% 0.008 70);     /* text on dark fills */

  /* --- Borders --- */
  --border:             oklch(88% 0.014 60);     /* default card borders */
  --border-subtle:      oklch(92% 0.010 60);     /* hairline list dividers */
  --border-strong:      oklch(78% 0.020 55);     /* emphasized inputs */

  /* --- Brand / accent --- */
  --accent:             oklch(72% 0.150 60);     /* amber */
  --accent-hover:       oklch(66% 0.155 58);     /* amber, one step darker */
  --accent-press:       oklch(60% 0.150 55);
  --accent-soft:        oklch(94% 0.045 70);     /* accent tint for backgrounds */
  --accent-fg:          oklch(98% 0.008 70);     /* text on amber */
  --accent-ring:        oklch(72% 0.150 60 / 0.4);

  /* --- Semantic (muted, warm-family) --- */
  --success:            oklch(58% 0.085 130);    /* sage olive */
  --success-soft:       oklch(94% 0.035 130);
  --danger:             oklch(54% 0.140 25);     /* brick red */
  --danger-soft:        oklch(94% 0.040 25);
  --warning:            oklch(70% 0.130 80);     /* warm gold */
  --warning-soft:       oklch(94% 0.040 80);
  --info:               oklch(58% 0.080 240);    /* dusty blue */
  --info-soft:          oklch(94% 0.025 240);

  /* --- Chart palette (5, even-lightness) --- */
  --chart-1:            oklch(70% 0.140 60);     /* amber */
  --chart-2:            oklch(62% 0.080 130);    /* sage */
  --chart-3:            oklch(58% 0.130 25);     /* brick */
  --chart-4:            oklch(65% 0.090 40);     /* clay */
  --chart-5:            oklch(60% 0.080 240);    /* dusty blue */

  /* --- Shadow (warm-tinted) --- */
  --shadow-sm:  0 1px 2px oklch(20% 0.02 50 / 0.06);
  --shadow-md:  0 4px 12px oklch(20% 0.02 50 / 0.08), 0 1px 2px oklch(20% 0.02 50 / 0.04);
  --shadow-lg:  0 16px 40px oklch(20% 0.02 50 / 0.12), 0 2px 4px oklch(20% 0.02 50 / 0.06);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* --- Backdrop --- */
  --backdrop:           oklch(20% 0.02 50 / 0.4);

  /* --- Type stacks --- */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-ui:      "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Spacing scale (4px base) --- */
  --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-14: 56px;
  --space-18: 72px;
  --space-24: 96px;

  /* --- Radii --- */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* --- Motion --- */
  --ease-out:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  320ms;
  --dur-sheet: 480ms;
}

/* ============================================================
   COLOR — dark mode
   ============================================================ */
:root[data-theme="dark"],
:root.dark {
  --bg:                 oklch(18% 0.015 50);     /* deep cocoa */
  --bg-elevated:        oklch(22% 0.018 50);
  --surface:            oklch(24% 0.020 50);
  --surface-hover:      oklch(28% 0.024 52);
  --surface-sunken:     oklch(20% 0.018 50);

  --fg:                 oklch(95% 0.012 70);
  --fg-muted:           oklch(75% 0.020 65);
  --fg-subtle:          oklch(58% 0.018 60);
  --fg-inverse:         oklch(20% 0.018 50);

  --border:             oklch(34% 0.022 55);
  --border-subtle:      oklch(28% 0.020 52);
  --border-strong:      oklch(46% 0.026 55);

  --accent:             oklch(76% 0.150 65);
  --accent-hover:       oklch(82% 0.150 67);
  --accent-press:       oklch(70% 0.150 62);
  --accent-soft:        oklch(32% 0.060 60);
  --accent-fg:          oklch(18% 0.020 50);
  --accent-ring:        oklch(76% 0.150 65 / 0.5);

  --success:            oklch(72% 0.090 130);
  --success-soft:       oklch(30% 0.040 130);
  --danger:             oklch(70% 0.140 25);
  --danger-soft:        oklch(30% 0.045 25);
  --warning:            oklch(78% 0.130 80);
  --warning-soft:       oklch(32% 0.045 80);
  --info:               oklch(72% 0.080 240);
  --info-soft:          oklch(30% 0.030 240);

  --chart-1:            oklch(76% 0.140 65);
  --chart-2:            oklch(72% 0.080 130);
  --chart-3:            oklch(70% 0.130 25);
  --chart-4:            oklch(72% 0.090 40);
  --chart-5:            oklch(72% 0.080 240);

  --shadow-sm:  0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-md:  0 4px 12px oklch(0% 0 0 / 0.4), 0 1px 2px oklch(0% 0 0 / 0.2);
  --shadow-lg:  0 16px 40px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.3);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  --backdrop:  oklch(10% 0.01 50 / 0.6);
}

/* ============================================================
   AUTO mode — follow OS
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:                 oklch(18% 0.015 50);
    --bg-elevated:        oklch(22% 0.018 50);
    --surface:            oklch(24% 0.020 50);
    --surface-hover:      oklch(28% 0.024 52);
    --surface-sunken:     oklch(20% 0.018 50);
    --fg:                 oklch(95% 0.012 70);
    --fg-muted:           oklch(75% 0.020 65);
    --fg-subtle:          oklch(58% 0.018 60);
    --fg-inverse:         oklch(20% 0.018 50);
    --border:             oklch(34% 0.022 55);
    --border-subtle:      oklch(28% 0.020 52);
    --border-strong:      oklch(46% 0.026 55);
    --accent:             oklch(76% 0.150 65);
    --accent-hover:       oklch(82% 0.150 67);
    --accent-press:       oklch(70% 0.150 62);
    --accent-soft:        oklch(32% 0.060 60);
    --accent-fg:          oklch(18% 0.020 50);
    --accent-ring:        oklch(76% 0.150 65 / 0.5);
    --success:            oklch(72% 0.090 130);
    --success-soft:       oklch(30% 0.040 130);
    --danger:             oklch(70% 0.140 25);
    --danger-soft:        oklch(30% 0.045 25);
    --warning:            oklch(78% 0.130 80);
    --warning-soft:       oklch(32% 0.045 80);
    --info:               oklch(72% 0.080 240);
    --info-soft:          oklch(30% 0.030 240);
    --chart-1:            oklch(76% 0.140 65);
    --chart-2:            oklch(72% 0.080 130);
    --chart-3:            oklch(70% 0.130 25);
    --chart-4:            oklch(72% 0.090 40);
    --chart-5:            oklch(72% 0.080 240);
    --shadow-sm:  0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-md:  0 4px 12px oklch(0% 0 0 / 0.4), 0 1px 2px oklch(0% 0 0 / 0.2);
    --shadow-lg:  0 16px 40px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.3);
    --backdrop:  oklch(10% 0.01 50 / 0.6);
  }
}

/* ============================================================
   TYPE — base + semantic
   ============================================================ */
html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — for hero numbers & marketing.
   Lighter weights at large sizes — Fraunces is built for this. */
.qs-display-1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.qs-display-2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Headings */
.qs-h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.qs-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.qs-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.qs-h4, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
}

/* Body — Fraunces at light weight reads like an editorial weekend mag */
.qs-body, p {
  font-family: var(--font-body);
  font-weight: 350;
  font-size: 16px;
  line-height: 1.6;
}
.qs-body-lg {
  font-size: 18px;
  line-height: 1.55;
}
.qs-body-sm {
  font-size: 14px;
  line-height: 1.5;
}

/* UI text — small functional copy */
.qs-ui {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.005em;
}
.qs-caption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
  text-transform: none;
}
.qs-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Numerics — money */
.qs-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}
.qs-num-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.015em;
}

/* Mono */
.qs-mono, code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: "ss02";
}

/* Links */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}