/*! © 2026 VertexStudio, Inc. — All rights reserved. Proprietary and confidential. */
/* ============================================================
   VertexStudio — Design Tokens
   The single source of truth for the brand. Recolor or
   retype the entire product by editing values here.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ════════════════════════════════════════════════════════════
     WARM-EDITORIAL identity (default). Cream canvas, warm ink,
     clay primary + amber accent. Inspired by editorial AI brands.
     A full dark scheme is preserved under html[data-theme="dark"].
     ════════════════════════════════════════════════════════════ */

  /* ── Surfaces (pure white, neutral greys — no warm tint) ── */
  --bg:        #ffffff;
  --bg-1:      #f5f5f6;
  --bg-2:      #ffffff;
  --bg-3:      #ececee;
  --surface:   rgba(20, 20, 24, .026);
  --surface-2: rgba(26, 24, 20, .045);
  --surface-3: rgba(26, 24, 20, .075);

  /* ── Glass (frosted wrappers over the graph backdrop) ── */
  --glass:        rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-edge:   rgba(26, 24, 20, .10);
  --glass-hi:     rgba(255, 255, 255, .75);
  --glass-blur:   blur(16px) saturate(150%);

  /* ── Text (warm ink) ── */
  --text:   #1a1813;
  --text-2: #4a4640;
  --muted:  #6e6a60;
  --faint:  #9c978a;

  /* ── Hairlines ── */
  --line:   rgba(26, 24, 20, .10);
  --line-2: rgba(26, 24, 20, .16);
  --line-strong: rgba(26, 24, 20, .28);

  /* ── Accent palette (warm + editorial secondaries for category dots / graph) ── */
  --violet:  #8a6db0;   /* muted plum  */
  --indigo:  #6a9bcc;   /* dusty blue  */
  --blue:    #6a9bcc;
  --cyan:    #4f9d96;   /* teal-sage   */
  --pink:    #c0697f;   /* dusty rose  */
  --emerald: #788c5d;   /* sage        */
  --amber:   #cf9b54;
  --rose:    #c0697f;
  --clay:    #c2613d;
  /* Brand defaults (fallback) — the live values come from brand.config.json
     via assets/css/brand.css, which loads right after this file. Default = blue. */
  --brand:   #2b6bff;
  --brand-2: #60a5fa;
  --on-brand: #ffffff;   /* readable text/icon color on brand surfaces */

  /* ── Signature gradients (blue) ── */
  --grad-brand:  linear-gradient(120deg, #2b6bff 0%, #4f86ff 50%, #60a5fa 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(43, 107, 255, .9), rgba(96, 165, 250, .8));
  --grad-text:   linear-gradient(120deg, #111114 0%, #2b6bff 60%, #60a5fa 100%);
  --grad-line:   linear-gradient(90deg, transparent, var(--line-2), transparent);

  /* ── Glows & shadows ── */
  --glow-brand: 0 0 0 1px rgba(43, 107, 255, .28), 0 12px 40px -8px rgba(43, 107, 255, .32);
  --shadow-sm:  0 2px 8px rgba(45, 35, 24, .08);
  --shadow:     0 10px 30px -12px rgba(45, 35, 24, .16);
  --shadow-lg:  0 30px 70px -28px rgba(45, 35, 24, .22);
  --shadow-card-hover: 0 26px 60px -30px rgba(45, 35, 24, .28), 0 0 0 1px var(--line-2);

  /* ── Radii ── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ── Layout ── */
  --nav-h: 70px;
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --maxw-prose: 860px;

  /* ── Type ── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Modular type scale (fluid) */
  --fs-display: clamp(2.9rem, 1.6rem + 5.6vw, 5.6rem);
  --fs-h1:      clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --fs-h3:      clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --fs-lead:    clamp(1.05rem, .98rem + .5vw, 1.25rem);
  --fs-body:    1rem;
  --fs-sm:      .875rem;
  --fs-xs:      .76rem;

  /* ── Motion ── */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.2, .9, .25, 1.2);

  /* ── Grain overlay (tiny tiled fractal noise) ── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   THEMES — configurable site-wide via <html data-theme>.
   Default (no attribute) = Warm-Editorial (light cream).
   A full Midnight dark scheme is available via data-theme="dark".
   ============================================================ */

/* ── Dark appearance (the original Midnight scheme, preserved) ── */
html[data-theme="dark"] {
  --bg:        #06060d;
  --bg-1:      #0a0a14;
  --bg-2:      #0f0f1c;
  --bg-3:      #161628;
  --surface:   rgba(255, 255, 255, .026);
  --surface-2: rgba(255, 255, 255, .045);
  --surface-3: rgba(255, 255, 255, .07);
  --text:   #f5f5fb;
  --text-2: #c2c2d6;
  --muted:  #83839a;
  --faint:  #565670;
  --line:   rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .22);
  --glass:        rgba(255, 255, 255, .05);
  --glass-strong: rgba(255, 255, 255, .09);
  --glass-edge:   rgba(255, 255, 255, .12);
  --glass-hi:     rgba(255, 255, 255, .08);
  --glass-blur:   blur(16px) saturate(140%);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, .3);
  --shadow:     0 10px 30px -12px rgba(0, 0, 0, .55);
  --shadow-lg:  0 30px 80px -24px rgba(0, 0, 0, .7);
  --shadow-card-hover: 0 30px 70px -28px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-2);
  /* gradient text reads light-first on dark */
  --grad-text: linear-gradient(120deg, #ffffff 0%, var(--brand) 60%, var(--brand-2) 100%);
}

/* ════════════════════════════════════════════════════════════
   ACCENT PRESETS — the rebranding switch. Set html[data-accent="…"]
   (via the theme control or window.VXBrand) to re-skin the brand
   across the whole site. "clay" is the default (from brand.css).
   These beat brand.css because html[…] out-specifies :root.
   ════════════════════════════════════════════════════════════ */
html[data-accent="blue"]    { --brand:#2b6bff; --brand-2:#60a5fa; --grad-brand:linear-gradient(120deg,#2b6bff,#4f86ff,#60a5fa); }
html[data-accent="mono"]    { --brand:#1b1b1f; --brand-2:#6e6e78; --grad-brand:linear-gradient(120deg,#33333a,#1b1b1f); }
html[data-accent="mono"]:not([data-theme="dark"]) { --grad-text: linear-gradient(120deg,#111114 0%, #2c2c32 55%, #6e6e78 100%); }
html[data-accent="mono"][data-theme="dark"] { --brand:#e9e9ee; --brand-2:#9a9aa6; --on-brand:#111114; --grad-brand:linear-gradient(120deg,#ffffff,#cfcfd6); --grad-text:linear-gradient(120deg,#ffffff 0%,#d6d6dd 60%,#9a9aa6 100%); }
html[data-accent="clay"]    { --brand:#c2613d; --brand-2:#cf9b54; --grad-brand:linear-gradient(120deg,#c2613d,#d98a4f,#cf9b54); }
html[data-accent="indigo"]  { --brand:#5b6cff; --brand-2:#22d3ee; --grad-brand:linear-gradient(120deg,#5b6cff,#7c8bff,#22d3ee); }
html[data-accent="emerald"] { --brand:#0f9d6b; --brand-2:#34d399; --grad-brand:linear-gradient(120deg,#0f9d6b,#10b981,#34d399); }
html[data-accent="violet"]  { --brand:#7c4dff; --brand-2:#c084fc; --grad-brand:linear-gradient(120deg,#7c4dff,#9b6bff,#c084fc); }
html[data-accent="sunset"]  { --brand:#e0533d; --brand-2:#f5a04f; --grad-brand:linear-gradient(120deg,#e0533d,#ef7a4f,#f5a04f); }
/* gradient-text reads correctly per appearance */
html[data-accent]:not([data-theme="dark"]) { --grad-text: linear-gradient(120deg,#1a1813 0%, var(--brand) 60%, var(--brand-2) 100%); }
html[data-accent][data-theme="dark"]        { --grad-text: linear-gradient(120deg,#ffffff 0%, var(--brand) 60%, var(--brand-2) 100%); }