/* ============================================================================
   x4digital V3 — Unified Design Tokens
   Single source of design language for landing + chat + dashboard.
   Per Charter NN#5 (anti-templatey) + feedback_aesthetic_is_signal.md
   (we build websites; our chrome IS the credibility test).
   ============================================================================
   Source: V3-attempt-1 dashboard un-flatten pass (commit 72dfa9a) generalized
           into shared tokens.
   ============================================================================ */

:root {
  /* ── Color: warm-paper foundation ── */
  --bg: #FAFAF7;                  /* warm off-white canvas */
  --surface: #FFFFFF;             /* card / panel surface */
  --surface-2: #F5F4EE;           /* deeper warm tone for tabs / sections */
  --surface-3: #EFEDE4;           /* deepest warm tone for hover-rest states */

  /* ── Color: ink (text) ── */
  --ink-900: #1A1612;             /* headings, primary text */
  --ink-700: #3A332C;             /* body text */
  --ink-600: #5A5048;             /* secondary text */
  --ink-500: #7A6F65;             /* muted text */
  --ink-400: #9A9087;             /* disabled / placeholder */
  --ink-300: #BFB8AF;             /* dividers / borders */
  --ink-200: #DDD7CF;             /* soft borders */
  --ink-100: #EDE9E2;             /* subtle dividers */

  /* ── Color: clay accent (warm orange-red) ── */
  --accent: #D9512C;              /* primary accent — clay */
  --accent-2: #B83E1F;            /* deeper clay (hover, gradient stops) */
  --accent-soft: #FBE9E2;         /* clay-tinted soft surface */

  /* ── Color: gold accent ── */
  --gold: #C8A24A;                /* gold */
  --gold-soft: #F4ECCC;           /* gold-tinted soft surface */
  --gold-deep: #A1822F;           /* deeper gold for text-on-light */

  /* ── Color: semantic ── */
  --success: #4A7C3F;
  --success-soft: #E5F1E0;
  --warn: #C8842A;
  --warn-soft: #FBEDD8;
  --danger: #B53D2D;
  --danger-soft: #FBDDDB;

  /* ── Type: families ── */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Type: scale (fluid) ── */
  --text-xs:   clamp(11px, 0.7vw + 0.5rem, 12px);
  --text-sm:   clamp(13px, 0.8vw + 0.6rem, 14px);
  --text-base: clamp(15px, 1vw + 0.6rem, 16px);
  --text-lg:   clamp(17px, 1.1vw + 0.7rem, 19px);
  --text-xl:   clamp(20px, 1.4vw + 0.7rem, 23px);
  --text-2xl:  clamp(24px, 1.8vw + 0.8rem, 28px);
  --text-3xl:  clamp(28px, 2.4vw + 0.8rem, 34px);
  --text-4xl:  clamp(34px, 3vw + 1rem, 44px);
  --text-5xl:  clamp(40px, 4vw + 1rem, 56px);
  --text-6xl:  clamp(48px, 5vw + 1rem, 72px);

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

  /* ── Type: line-height ── */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ── Type: letter-spacing ── */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;       /* eyebrow caps */

  /* ── Space: scale ── */
  --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;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ── Shadow (elevation + lift) ── */
  --shadow-0: 0 1px 2px rgba(26, 22, 18, 0.04);
  --shadow-1: 0 4px 12px rgba(26, 22, 18, 0.06), 0 1px 3px rgba(26, 22, 18, 0.04);
  --shadow-2: 0 12px 32px rgba(26, 22, 18, 0.10), 0 4px 12px rgba(26, 22, 18, 0.06);
  --shadow-3: 0 24px 64px rgba(26, 22, 18, 0.14), 0 8px 24px rgba(26, 22, 18, 0.08);
  --shadow-clay: 0 4px 12px rgba(217, 81, 44, 0.20);
  --shadow-clay-lift: 0 12px 32px rgba(217, 81, 44, 0.24);

  /* ── Motion ── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-deliberate: 480ms;

  /* ── Layout ── */
  --container-narrow: 640px;
  --container-base: 880px;
  --container-wide: 1180px;
  --container-full: 1440px;
}

/* ── Body baseline ── */
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 25% 0%, rgba(200, 162, 74, 0.06), transparent 55%),
    radial-gradient(ellipse at 75% 100%, rgba(217, 81, 44, 0.04), transparent 55%),
    var(--bg);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Headings: serif with tight tracking ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  color: var(--ink-900);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  font-weight: var(--weight-semibold);
}

/* ── Eyebrow caps (gold uppercase tracked-out) ── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gold-deep);
}

/* ── Focus ring (consistent across all interactive surfaces) ──
   Wave 5 polish: 2px clay outline + 2px offset (tighter than the default
   3px) + a soft clay glow via box-shadow so the ring stays visible on
   warm-paper. The glow is what keeps the ring legible against the body's
   off-white canvas without raising the outline weight. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(217, 81, 44, 0.18);
  border-radius: var(--radius-sm);
}
/* Avoid the focus halo bleeding the ring into a body-stretched shadow on
   wide surfaces like form inputs where the box-shadow would compose with
   the input's own focus shadow. Inputs already define their own focus
   treatment in components.css (.input:focus, .textarea:focus); strip the
   outer halo there so we don't double-paint. */
.input:focus-visible,
.textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Selection ── */
::selection {
  background: var(--accent-soft);
  color: var(--ink-900);
}

/* ── Scrollbars (subtle, warm) ── */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ink-300);
}

/* ============================================================================
   DARK MODE — `[data-theme="dark"]` on <html>
   ============================================================================
   Set via small inline script in each surface's <head> that reads
   localStorage('x4-theme') OR `prefers-color-scheme: dark`. Toggle button on
   landing surface (chat + dashboard inherit via shared localStorage key).
   Per Charter feedback_aesthetic_is_signal — surfaces ARE the demo. Dark mode
   honors the warm-paper palette inverted: deep cocoa-warm bg with the same
   clay + gold accents (slightly brightened for contrast against dark).
   ============================================================================ */

:root {
  /* Header surface (semi-transparent over body) — themed token rather than
     hardcoded so site-header swaps cleanly in dark mode. */
  --header-bg: rgba(250, 250, 247, 0.92);
}

[data-theme="dark"] {
  /* ── Color: warm-dark foundation ── */
  --bg: #1A1612;                  /* deep cocoa-warm canvas */
  --surface: #25201B;             /* card / panel surface */
  --surface-2: #2D2823;           /* tabs / sections */
  --surface-3: #383229;           /* hover-rest */

  /* ── Color: ink (inverted — text becomes light) ── */
  --ink-900: #FAFAF7;             /* primary text */
  --ink-700: #E0DAD2;             /* body */
  --ink-600: #BFB8AF;             /* secondary */
  --ink-500: #9A9087;             /* muted */
  --ink-400: #7A6F65;             /* disabled / placeholder */
  --ink-300: #5A5048;             /* dividers / borders */
  --ink-200: #3A332C;             /* soft borders */
  --ink-100: #2D2823;             /* subtle dividers */

  /* ── Accent (slightly brightened for dark contrast) ── */
  --accent: #E96944;
  --accent-2: #FF7B52;
  --accent-soft: rgba(233, 105, 68, 0.15);

  /* ── Gold (brightened) ── */
  --gold: #D4B36C;
  --gold-soft: rgba(212, 179, 108, 0.18);
  --gold-deep: #F0CD7E;

  /* ── Semantic ── */
  --success: #6FA862;
  --success-soft: rgba(111, 168, 98, 0.18);
  --warn: #DBA655;
  --warn-soft: rgba(219, 166, 85, 0.18);
  --danger: #D85A4A;
  --danger-soft: rgba(216, 90, 74, 0.18);

  /* ── Shadows (deeper for dark) ── */
  --shadow-0: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.20);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-clay: 0 4px 12px rgba(233, 105, 68, 0.30);
  --shadow-clay-lift: 0 12px 32px rgba(233, 105, 68, 0.40);

  /* Header surface dark variant */
  --header-bg: rgba(26, 22, 18, 0.92);
}

/* Smooth color transitions on theme swap (NOT on initial load — the inline
   script in <head> sets data-theme before render, so transitions apply only
   on user-driven toggle). prefers-reduced-motion override below. */
html {
  transition: color 240ms var(--ease-standard), background-color 240ms var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
}