/* ==========================================================================
   StartiQOS AI — Design Tokens
   Single source of truth. Change a value here, it changes everywhere.
   ========================================================================== */

:root{

  /* ---- Colour ---------------------------------------------------------- */
  --cream:        #FBF9F6;   /* page background */
  --cream-2:      #F5F1EA;   /* alternate section background */
  --cream-3:      #EFEAE1;   /* subtle fills */

  --gold:         #C87D2E;   /* primary accent */
  --gold-deep:    #A8641E;   /* hover / pressed */
  --gold-pale:    #E8C89A;   /* tints */
  --gold-wash:    rgba(200,125,46,.08);

  --ink:          #141414;   /* headings, primary text */
  --ink-2:        #3A3833;   /* body text */
  --muted:        #6E6A63;   /* secondary, captions */
  --muted-2:      #9A958C;   /* disabled, tertiary */

  --line:         rgba(20,20,20,.09);
  --line-strong:  rgba(20,20,20,.16);
  --line-gold:    rgba(200,125,46,.28);

  --white:        #FFFFFF;

  /* Status */
  --live:         #2E7D4F;
  --live-bg:      rgba(46,125,79,.09);
  --dev:          #8A857C;
  --dev-bg:       rgba(138,133,124,.10);
  --warn:         #B8791F;

  /* Hero console (css/hero-console.css); dark surfaces come from premium.css */
  --cx-muted:     rgba(255,255,255,.45);
  --cx-faint:     rgba(255,255,255,.12);
  --cx-grid:      rgba(255,255,255,.04);
  --cx-edge:      rgba(255,255,255,.08);
  --cx-glare:     rgba(255,255,255,.06);
  --cx-card:      rgba(16,16,19,.96);
  --cx-ground:    rgba(20,20,20,.30);
  --cx-shadow:    0 50px 100px -30px rgba(20,20,20,.45), 0 30px 60px -40px rgba(200,125,46,.35);

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --fs-display:   clamp(36px, 4.6vw, 64px);   /* same as h1: one page-title size on every page */
  --fs-h1:        clamp(36px, 4.6vw, 64px);
  --fs-h2:        clamp(28px, 3.2vw, 44px);
  --fs-h3:        clamp(18px, 1.6vw, 22px);   /* card, row and step titles */
  --fs-doc-h:     clamp(21px, 2vw, 27px);    /* section headings inside long documents (legal, blog) */
  --fs-h4:        clamp(18px, 1.6vw, 22px);
  --fs-lead:      clamp(16px, 1.3vw, 18px);
  --fs-body:      15.5px;
  --fs-sm:        13.5px;
  --fs-xs:        11.5px;
  --fs-label:     11px;

  --lh-tight:     1.08;
  --lh-snug:      1.28;
  --lh-body:      1.78;

  --ls-tight:     -.018em;
  --ls-label:     .14em;
  --ls-mono:      .12em;

  /* ---- Space ----------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --gutter:       clamp(20px, 4vw, 56px);
  --section-y:    clamp(72px, 11vh, 150px);
  --max-w:        1320px;
  --max-text:     680px;

  /* ---- Motion ---------------------------------------------------------- */
  --e:            cubic-bezier(.16, 1, .3, 1);   /* long tail — the premium curve */
  --e-out:        cubic-bezier(.22, .61, .36, 1);
  --t-fast:       .35s;
  --t-base:       .6s;
  --t-slow:       1.1s;

  /* ---- Depth ----------------------------------------------------------- */
  --shadow-sm:    0 1px 2px rgba(20,20,20,.04);
  --shadow-md:    0 4px 20px rgba(20,20,20,.06);
  --shadow-lg:    0 12px 44px rgba(20,20,20,.09);

  /* ---- Layer ----------------------------------------------------------- */
  --z-base:       1;
  --z-content:    5;
  --z-grain:      3;
  --z-nav:        20;
  --z-overlay:    40;
  --z-modal:      60;
}