/* =============================================================
   QQ Technology — Design Tokens
   Colors + Typography + Spacing + Radii + Shadows + Motion
   Light + Dark modes
   ============================================================= */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* =============================================================
   1. RAW COLOR PALETTE
   These are the literal hex values. Don't reference these in
   component code — use the semantic tokens below.
   ============================================================= */

:root {
  /* Cream — warm off-white backgrounds */
  --cream-50:  #FDFBF7;
  --cream-100: #FAF6F0;
  --cream-200: #F2EBDE;
  --cream-300: #E8DFD2;
  --cream-400: #D9CCB5;

  /* Earth — warm brown grays for text + dark surfaces */
  --earth-300: #B8A892;
  --earth-400: #8C7A63;
  --earth-500: #6B5947;
  --earth-600: #4A3F32;
  --earth-700: #332B22;
  --earth-800: #2A231C;
  --earth-900: #1C1814;
  --earth-950: #120F0C;

  /* Clay — primary terracotta */
  --clay-100: #F5DDD0;
  --clay-200: #EAB99F;
  --clay-300: #D8906B;
  --clay-400: #C2613B;   /* primary light */
  --clay-500: #A84F2C;
  --clay-600: #8A3F21;
  --clay-700: #E08160;   /* primary dark mode (brighter) */

  /* Sage — calming green accent (success) */
  --sage-100: #DEE7DC;
  --sage-200: #B5C8AF;
  --sage-300: #88A481;
  --sage-400: #5E8155;
  --sage-500: #466840;
  --sage-600: #93B888;   /* dark mode variant */

  /* Ochre — warm yellow accent (warning, highlight) */
  --ochre-100: #F5E6BD;
  --ochre-200: #E8CB80;
  --ochre-300: #D4AC4B;
  --ochre-400: #B58A2A;
  --ochre-500: #8C6818;
  --ochre-600: #E5C36B;  /* dark mode variant */

  /* Plum — quiet info accent */
  --plum-100: #E8DAE0;
  --plum-300: #A56F84;
  --plum-400: #7C4A5E;
  --plum-500: #5A3344;
  --plum-600: #B88BA0;   /* dark mode variant */

  /* Rust — danger (deep red-orange, not stoplight red) */
  --rust-100: #F2D4CB;
  --rust-300: #C8654A;
  --rust-400: #A8412B;
  --rust-500: #862E1C;
  --rust-600: #D87A60;   /* dark mode variant */
}

/* =============================================================
   2. SEMANTIC TOKENS — LIGHT MODE (default)
   These are what component code should reference.
   ============================================================= */

:root {
  color-scheme: light;

  /* Backgrounds */
  --bg:           var(--cream-100);   /* page */
  --bg-subtle:    var(--cream-200);   /* alt rows, code blocks */
  --bg-elevated:  var(--cream-50);    /* cards, modals */
  --bg-inset:     var(--cream-200);   /* recessed surfaces, input bg */
  --bg-overlay:   rgba(28, 24, 20, 0.6);  /* modal scrim */

  /* Foregrounds (text + iconography) */
  --fg:           var(--earth-800);   /* primary text */
  --fg-muted:     var(--earth-500);   /* secondary text */
  --fg-subtle:    var(--earth-400);   /* tertiary text, placeholders */
  --fg-on-clay:   var(--cream-50);    /* text on clay backgrounds */

  /* Borders */
  --border:         var(--cream-300);
  --border-strong:  var(--cream-400);
  --border-focus:   var(--clay-400);

  /* Brand & accents */
  --primary:        var(--clay-400);
  --primary-hover:  var(--clay-500);
  --primary-active: var(--clay-600);
  --primary-soft:   var(--clay-100);

  --success:        var(--sage-400);
  --success-soft:   var(--sage-100);
  --warning:        var(--ochre-400);
  --warning-soft:   var(--ochre-100);
  --danger:         var(--rust-400);
  --danger-soft:    var(--rust-100);
  --info:           var(--plum-400);
  --info-soft:      var(--plum-100);

  /* Shadows — warm brown tint, never pure black */
  --shadow-sm: 0 1px 2px rgba(74, 50, 30, 0.06), 0 1px 1px rgba(74, 50, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(74, 50, 30, 0.08), 0 2px 4px rgba(74, 50, 30, 0.04);
  --shadow-lg: 0 12px 32px rgba(74, 50, 30, 0.10), 0 4px 8px rgba(74, 50, 30, 0.05);
  --shadow-xl: 0 24px 64px rgba(74, 50, 30, 0.12), 0 8px 16px rgba(74, 50, 30, 0.06);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--clay-400);
}

/* =============================================================
   3. SEMANTIC TOKENS — DARK MODE
   ============================================================= */

:root[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:           var(--earth-900);
    --bg-subtle:    var(--earth-800);
    --bg-elevated:  var(--earth-800);
    --bg-inset:     var(--earth-950);
    --bg-overlay:   rgba(0, 0, 0, 0.7);

    --fg:           var(--cream-100);
    --fg-muted:     var(--earth-300);
    --fg-subtle:    var(--earth-400);
    --fg-on-clay:   var(--earth-900);

    --border:         var(--earth-700);
    --border-strong:  var(--earth-600);
    --border-focus:   var(--clay-700);

    --primary:        var(--clay-700);
    --primary-hover:  var(--clay-300);
    --primary-active: var(--clay-200);
    --primary-soft:   rgba(224, 129, 96, 0.15);

    --success:        var(--sage-600);
    --success-soft:   rgba(147, 184, 136, 0.15);
    --warning:        var(--ochre-600);
    --warning-soft:   rgba(229, 195, 107, 0.15);
    --danger:         var(--rust-600);
    --danger-soft:    rgba(216, 122, 96, 0.15);
    --info:           var(--plum-600);
    --info-soft:      rgba(184, 139, 160, 0.15);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 240, 220, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 240, 220, 0.04);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 220, 0.04);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 240, 220, 0.05);
    --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--clay-700);
  }
}

/* Explicit override — wins regardless of OS preference */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:           var(--earth-900);
  --bg-subtle:    var(--earth-800);
  --bg-elevated:  var(--earth-800);
  --bg-inset:     var(--earth-950);
  --bg-overlay:   rgba(0, 0, 0, 0.7);
  --fg:           var(--cream-100);
  --fg-muted:     var(--earth-300);
  --fg-subtle:    var(--earth-400);
  --fg-on-clay:   var(--earth-900);
  --border:         var(--earth-700);
  --border-strong:  var(--earth-600);
  --border-focus:   var(--clay-700);
  --primary:        var(--clay-700);
  --primary-hover:  var(--clay-300);
  --primary-active: var(--clay-200);
  --primary-soft:   rgba(224, 129, 96, 0.15);
  --success:        var(--sage-600);
  --success-soft:   rgba(147, 184, 136, 0.15);
  --warning:        var(--ochre-600);
  --warning-soft:   rgba(229, 195, 107, 0.15);
  --danger:         var(--rust-600);
  --danger-soft:    rgba(216, 122, 96, 0.15);
  --info:           var(--plum-600);
  --info-soft:      rgba(184, 139, 160, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 240, 220, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 240, 220, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 240, 220, 0.04);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 240, 220, 0.05);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--clay-700);
}

/* =============================================================
   4. TYPOGRAPHY TOKENS
   ============================================================= */

:root {
  /* Font families */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (modular, ~1.25 ratio in body, larger jumps at display) */
  --text-xs:   0.75rem;     /* 12px — micro labels */
  --text-sm:   0.875rem;    /* 14px — captions, helper text */
  --text-base: 1rem;        /* 16px — body */
  --text-md:   1.125rem;    /* 18px — emphasized body */
  --text-lg:   1.375rem;    /* 22px — small headings */
  --text-xl:   1.75rem;     /* 28px — h3 */
  --text-2xl:  2.25rem;     /* 36px — h2 */
  --text-3xl:  3rem;        /* 48px — h1 */
  --text-4xl:  4rem;        /* 64px — display */
  --text-5xl:  5.5rem;      /* 88px — hero display */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Line heights */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;
}

/* =============================================================
   5. SPACING + RADII + MOTION
   ============================================================= */

:root {
  /* Spacing scale — 4px base. Skip 6/10/14 for rhythm. */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-24: 6rem;      /* 96 */

  /* Radii */
  --radius-sm:   0.5rem;     /* 8 */
  --radius-md:   0.75rem;    /* 12 */
  --radius-lg:   1rem;       /* 16 */
  --radius-xl:   1.5rem;     /* 24 */
  --radius-2xl:  2rem;       /* 32 */
  --radius-full: 9999px;

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);

  --duration-micro:   150ms;
  --duration-default: 240ms;
  --duration-slow:    360ms;
}

/* =============================================================
   6. SEMANTIC TYPE STYLES
   Apply these classes directly to elements as the default
   "voice" of the type system.
   ============================================================= */

.qq-display,
h1.qq {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.qq-hero {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-regular);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg);
}

.qq-h2,
h2.qq {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.qq-h3,
h3.qq {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.qq-h4,
h4.qq {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.qq-body,
p.qq {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}

.qq-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}

.qq-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.qq-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.qq-mono,
code.qq {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--weight-regular);
  background: var(--bg-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--fg);
}

/* Selection */
::selection {
  background: var(--primary-soft);
  color: var(--fg);
}