/* ============================================================================
 * TechnoCenter marketing website (v2)
 * tokens.css — the single source of design tokens. Ported verbatim from
 * deck-marketing/deck.css :root (the brand contract, reference/brand-spec.md),
 * extended with a fluid type scale, layout tokens, claim-gate vars, and the
 * scoped tokens used by the inline SVG product replicas (--rep-*).
 *
 * Pull a token from here. Do not redefine colours or fonts ad hoc.
 *
 * Breakpoints (mobile-first; CSS has no custom-media, so these are the
 * canonical values used across the stylesheets):
 *   sm  640px   ·  md 768px   ·  lg 1024px (nav collapses, grids go multi-col)
 *   xl 1280px (max content)   ·  2xl 1536px
 * ==========================================================================*/

:root {
  /* ---- Brand spectrum (the 7 hues of the cube + orange tint) ------------- */
  --blue:    #1868db;  --blue-deep:    #1250ab;  --blue-tint:    #e7effb;
  --teal:    #49b2b6;  --teal-deep:    #2f8a8e;  --teal-tint:    #e4f4f4;
  --green:   #8ac036;  --green-deep:   #5f8d1d;  --green-tint:   #eef7e1;
  --amber:   #f6960b;  --amber-deep:   #b96c00;  --amber-tint:   #fef0db;
  --orange:  #ef6507;  --orange-deep:  #c24f06;  --orange-tint:  #fde9dc;
  --magenta: #d3286e;  --magenta-deep: #a81e57;  --magenta-tint: #fbe5ee;
  --red:     #f52f3c;  --red-deep:     #c41f2b;  --red-tint:     #fee4e5;
  --purple:  #922791;  --purple-deep:  #6f1c6e;  --purple-tint:  #f3e4f3;

  /* lead/accent = blue (matches the wordmark) */
  --primary:      var(--blue);
  --primary-deep: var(--blue-deep);
  --primary-tint: var(--blue-tint);

  /* ---- Neutrals (single cool-slate family; never pure black/white) ------- */
  --ink:        #0E1525;
  --ink-soft:   #2A3344;
  --ink-mute:   #5A6577;
  --ink-faint:  #8A93A6;
  --surface:    #FBFBFD;
  --surface-2:  #F4F5F9;
  --surface-3:  #ECEEF5;
  --line:       #E7E9F2;
  --line-soft:  #F0F1F7;
  --white:      #ffffff;

  /* ---- Signature gradients ---------------------------------------------- */
  /* signature edge: a contained blue->purple brand blend (not the full spectrum).
     Per brand review, the discrete brand hues now live in the honeycomb accent
     (--honeycomb) — colours held in hex cells, never blended into a rainbow. */
  --band: linear-gradient(90deg, var(--blue) 0%, var(--purple) 100%);
  /* Honeycomb brand accent: the brand hues in discrete, tessellated hex cells. */
  --honeycomb: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 32'><polygon points='0,12 5,3.34 15,3.34 20,12 15,20.66 5,20.66' fill='%231868db'/><polygon points='15,20.66 20,12 30,12 35,20.66 30,29.32 20,29.32' fill='%2349b2b6'/><polygon points='30,12 35,3.34 45,3.34 50,12 45,20.66 35,20.66' fill='%238ac036'/><polygon points='45,20.66 50,12 60,12 65,20.66 60,29.32 50,29.32' fill='%23922791'/><polygon points='60,12 65,3.34 75,3.34 80,12 75,20.66 65,20.66' fill='%23f6960b'/><polygon points='75,20.66 80,12 90,12 95,20.66 90,29.32 80,29.32' fill='%23d3286e'/><polygon points='90,12 95,3.34 105,3.34 110,12 105,20.66 95,20.66' fill='%231250ab'/></svg>");
  --grad-blue: linear-gradient(135deg, #2a7bf0 0%, #1868db 100%);
  --grad-deep: linear-gradient(165deg, #131a2e 0%, #1d2640 60%, #243056 100%);

  /* ---- Tinted shadows (to slate hue — never rgba(0,0,0)) ----------------- */
  --shadow-sm:    0 2px 8px rgba(20, 28, 46, 0.06);
  --shadow:       0 10px 28px rgba(20, 28, 46, 0.09);
  --shadow-lg:    0 22px 50px -18px rgba(24, 104, 219, 0.30);
  --shadow-bento: 0 20px 40px -15px rgba(20, 28, 46, 0.13);
  --shadow-frame: 0 34px 80px -24px rgba(14, 21, 37, 0.42);

  /* ---- Radii ------------------------------------------------------------- */
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  --s12: 96px; --s14: 128px;

  /* ---- Layout ------------------------------------------------------------ */
  --container:      1200px;   /* default content max-width */
  --container-wide: 1320px;   /* wide sections / dashboards  */
  --gutter:  clamp(16px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 120px);
  --header-h: 68px;

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Space Grotesk", "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display: clamp(2.2rem, 1.1rem + 4.6vw, 5rem);    /* hero H1        */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.5vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.8125rem;
  --fs-mono:    0.8125rem;

  --lh-tight: 1.04;
  --lh-snug:  1.28;
  --lh-body:  1.6;

  /* ---- Motion ------------------------------------------------------------ */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);     /* ease-out expo: entrances */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot: tactile       */
  --dur-fast: 0.15s;
  --dur:      0.3s;
  --dur-slow: 0.6s;

  /* ---- Claim gate (see assets/js/gate.js + docs/claims-gate.md) ---------- */
  /* Ribbon shown on gated blocks while the site is in internal-review mode. */
  --gate-ribbon-bg: #ffd21f;
  --gate-ribbon-ink: #3a2c00;

  /* ---- Replica tokens (inline SVG product replicas) ---------------------- */
  /* Kept faithful to the real prototype so the marketing art is honest, but
     neutrals adopt the marketing slate so replicas sit naturally on the page.
     Product blue + Lumina purple are preserved for recognisability. */
  --rep-brand:     #2563eb;   /* prototype brand-500  */
  --rep-brand-600: #1d4ed8;
  --rep-brand-50:  #eff4ff;
  --rep-lumina-a:  #9333ea;   /* prototype lumina from */
  --rep-lumina-b:  #c026d3;   /* prototype lumina to   */
  --rep-teal:      #14b8a6;
  --rep-success:   #16a34a;  --rep-success-bg: #dcfce7;
  --rep-warning:   #d97706;  --rep-warning-bg: #fef3c7;
  --rep-danger:    #dc2626;  --rep-danger-bg:  #fee2e2;
  --rep-ink:       var(--ink);
  --rep-ink-mute:  var(--ink-mute);
  --rep-surface:   var(--surface);
  --rep-surface-2: var(--surface-2);
  --rep-line:      var(--line);
}