/* ============================================================================
   x4digital V5 — Unified Design Tokens
   Design language for the V5 customer-facing landing surface.
   Per Charter NN#5 (anti-templatey) + feedback_aesthetic_is_signal.md
   (we build websites; our chrome IS the credibility test).
   ============================================================================
   Source: selected donor visual-system learnings adapted to V5 contracts.
   ============================================================================ */

: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 */
  --header-bg: rgba(250, 250, 247, 0.86);

  /* ── 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 */
  --accent-foreground: #FFFFFF;

  /* ── 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 ── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   19px;
  --text-xl:   23px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --text-5xl:  56px;
  --text-6xl:  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;
  --tracking-normal: 0;
  --tracking-wide: 0;
  --tracking-wider: 0;

  /* ── 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: 8px;
  --radius-xl: 8px;
  --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;
}

@property --tech-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #C8A24A;
}

@property --tech-accent-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #A1822F;
}

[data-theme="dark"] {
  color-scheme: dark;
  --tech-accent: #C8A24A;
  --tech-accent-2: #A1822F;

  --bg: #1F1A16;
  --surface: #2B241F;
  --surface-2: #342C26;
  --surface-3: #40362E;
  --header-bg: rgba(31, 26, 22, 0.88);

  --ink-900: #FBF7F0;
  --ink-700: #D8CFC4;
  --ink-600: #C0B4A8;
  --ink-500: #9D9185;
  --ink-400: #7F7165;
  --ink-300: #615448;
  --ink-200: #4D4238;
  --ink-100: #342C26;

  --accent: #C8A24A;
  --accent-2: #A1822F;
  --accent-soft: color-mix(in srgb, var(--tech-accent) 10%, transparent);
  --accent-foreground: #1A1612;
  --gold: #C8A24A;
  --gold-soft: color-mix(in srgb, var(--tech-accent) 8%, #2A2418);
  --gold-deep: #A1822F;

  --success: #7BD88F;
  --success-soft: rgba(123, 216, 143, 0.14);
  --warn: #D8B55D;
  --warn-soft: rgba(216, 181, 93, 0.14);
  --danger: #FF7B6C;
  --danger-soft: rgba(255, 123, 108, 0.14);

  --shadow-0: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 16px 42px rgba(0, 0, 0, 0.34), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-3: 0 28px 76px rgba(0, 0, 0, 0.44), 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-clay: 0 4px 16px color-mix(in srgb, var(--tech-accent) 16%, transparent);
  --shadow-clay-lift: 0 14px 40px color-mix(in srgb, var(--tech-accent) 20%, transparent);

  animation: x4-dark-accent-cycle 156s ease-in-out infinite;
}

@keyframes x4-dark-accent-cycle {
  0%, 8%, 92%, 100% {
    --tech-accent: #C8A24A;
    --tech-accent-2: #A1822F;
  }
  24%, 76% {
    --tech-accent: #DDB95E;
    --tech-accent-2: #C8A24A;
  }
  38%, 62% {
    --tech-accent: #6FD6B4;
    --tech-accent-2: #8DEBC9;
  }
  47%, 56% {
    --tech-accent: #34D399;
    --tech-accent-2: #5EEAD4;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] {
    animation: none;
    --tech-accent: #C8A24A;
    --tech-accent-2: #A1822F;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Body baseline ── */
body {
  margin: 0;
  background: 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) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── 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);
}