/* ============================================================================
   VERSI Agency — Design Tokens
   Color + Type foundations. DARK "glow-gradient" language: near-black canvas,
   a blue→violet→magenta brand gradient as the single accent, soft glows and
   translucent glass surfaces. The SF Pro type ladder is retained.
   ----------------------------------------------------------------------------
   Import this file, then use the semantic vars (--bg, --fg, --accent, --grad…)
   rather than raw hex. Base vars are the source of truth; semantic vars map
   intent → base. (Legacy light/Apple tokens are kept below for reference but
   are no longer the default surface.)
   ============================================================================ */

/* SF Pro is Apple's proprietary system font. On Apple platforms the system-ui /
   -apple-system stack resolves to the real SF Pro Display / Text. Off-platform
   we fall back to Inter (loaded via Google Fonts in each HTML file). See
   README.md → "Font substitution" for the substitution note. */

:root {
  /* ---- Font families ---------------------------------------------------- */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-text:    "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  /* ====================================================================== */
  /* BASE COLORS  (raw palette — do not use directly in components)         */
  /* ====================================================================== */

  /* Brand / accent — the single interactive color */
  --c-action-blue:    #0066cc;  /* primary "click me" */
  --c-focus-blue:     #0071e3;  /* keyboard focus ring */
  --c-sky-blue:       #2997ff;  /* links on dark surfaces */

  /* Surfaces */
  --c-white:          #ffffff;
  --c-parchment:      #f5f5f7;  /* signature Apple off-white */
  --c-pearl:          #fafafc;  /* ghost-button fill */
  --c-tile-1:         #272729;  /* primary dark tile */
  --c-tile-2:         #2a2a2c;  /* micro-step lighter */
  --c-tile-3:         #252527;  /* micro-step darker */
  --c-black:          #000000;  /* true void / global nav */
  --c-chip:           #d2d2d7;  /* translucent control chip base */

  /* Text */
  --c-ink:            #1d1d1f;  /* headlines + body on light */
  --c-on-dark:        #ffffff;
  --c-body-muted:     #cccccc;  /* secondary copy on dark */
  --c-ink-80:         #333333;  /* body on pearl button */
  --c-ink-48:         #7a7a7a;  /* disabled / legal fine-print */

  /* Hairlines */
  --c-divider:        #f0f0f0;  /* soft ring on secondary buttons */
  --c-hairline:       #e0e0e0;  /* 1px card / chip border */
  --c-hairline-soft:  rgba(0, 0, 0, 0.08);

  /* ---- DARK BRAND PALETTE (the active direction) ----------------------- */
  --c-bg:        #08080a;  /* near-black canvas */
  --c-bg-2:      #0c0c0f;  /* slightly raised panel / footer */
  --c-glass:     rgba(255,255,255,0.04);  /* glass surface fill */
  --c-glass-2:   rgba(255,255,255,0.06);
  --c-line:      rgba(255,255,255,0.09);  /* hairline border */
  --c-line-2:    rgba(255,255,255,0.16);  /* stronger hairline */
  --c-fg:        #f4f4f6;  /* primary text */
  --c-fg-dim:    #9a9aa2;  /* secondary text */
  --c-fg-faint:  #6a6a72;  /* tertiary / legal */
  --c-grad-1:    #2f6bff;  /* gradient stop — blue */
  --c-grad-2:    #7c3aed;  /* gradient stop — violet */
  --c-grad-3:    #e0218a;  /* gradient stop — magenta */
  --c-violet:    #9b6bff;  /* solid accent (links, focus) */

  /* The brand gradient — the single accent. Use for CTAs, highlights, dots. */
  --grad:        linear-gradient(95deg, var(--c-grad-1) 0%, var(--c-grad-2) 52%, var(--c-grad-3) 100%);
  --glow-violet: rgba(124,58,237,0.55);
  --glow-magenta:rgba(224,33,138,0.50);
  --glow-blue:   rgba(47,107,255,0.45);

  /* ====================================================================== */
  /* SEMANTIC COLORS  (use these in components)                            */
  /* ====================================================================== */
  --accent:           var(--c-violet);       /* solid accent (links/focus) */
  --accent-focus:     var(--c-grad-2);        /* focus ring */
  --accent-on-dark:   var(--c-violet);
  --on-accent:        #ffffff;

  --bg:               var(--c-bg);            /* default page canvas (dark) */
  --bg-alt:           var(--c-bg-2);          /* raised panel / footer */
  --bg-dark:          var(--c-bg);            /* alias */
  --bg-void:          #000000;                /* true void */
  --surface:          var(--c-glass);         /* glass card fill */
  --surface-2:        var(--c-glass-2);

  --fg:               var(--c-fg);            /* primary text */
  --fg-muted:         var(--c-fg-dim);        /* secondary text */
  --fg-faint:         var(--c-fg-faint);      /* tertiary text */
  --fg-on-dark:       var(--c-fg);
  --fg-on-dark-muted: var(--c-fg-dim);

  --border:           var(--c-line);
  --border-strong:    var(--c-line-2);
  --border-soft:      var(--c-line);

  /* ====================================================================== */
  /* RADII                                                                  */
  /* ====================================================================== */
  --r-none: 0px;
  --r-xs:   5px;
  --r-sm:   8px;
  --r-md:   11px;
  --r-lg:   18px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* ====================================================================== */
  /* SPACING  (base unit 8px)                                               */
  /* ====================================================================== */
  --s-xxs: 4px;
  --s-xs:  8px;
  --s-sm:  12px;
  --s-md:  17px;
  --s-lg:  24px;
  --s-xl:  32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* ====================================================================== */
  /* ELEVATION  (dark theme: glow + glass, not drop-shadows)                */
  /* ====================================================================== */
  --glow-card: 0 0 60px -20px var(--glow-violet);  /* featured glow */
  --shadow-product: 0 24px 60px -20px rgba(0,0,0,0.6);
  --blur-frosted: saturate(180%) blur(20px);

  /* ====================================================================== */
  /* MOTION                                                                  */
  /* ====================================================================== */
  --press-scale: 0.95;               /* system-wide active state */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 240ms;

  /* ====================================================================== */
  /* TYPE SCALE  (semantic → size/weight/leading/tracking)                  */
  /* Apple ladder: 300 / 400 / 600 / 700 — weight 500 deliberately absent.  */
  /* ====================================================================== */

  /* hero-display */
  --hero-size: 56px;   --hero-weight: 600; --hero-lh: 1.07; --hero-ls: -0.28px;
  /* display-lg (tile headlines) */
  --dlg-size: 40px;    --dlg-weight: 600;  --dlg-lh: 1.10;  --dlg-ls: 0px;
  /* display-md (section heads) */
  --dmd-size: 34px;    --dmd-weight: 600;  --dmd-lh: 1.47;  --dmd-ls: -0.374px;
  /* lead */
  --lead-size: 28px;   --lead-weight: 400; --lead-lh: 1.14; --lead-ls: 0.196px;
  /* lead-airy (rare weight 300) */
  --airy-size: 24px;   --airy-weight: 300; --airy-lh: 1.5;  --airy-ls: 0px;
  /* tagline */
  --tag-size: 21px;    --tag-weight: 600;  --tag-lh: 1.19;  --tag-ls: 0.231px;
  /* body-strong */
  --bs-size: 17px;     --bs-weight: 600;   --bs-lh: 1.24;   --bs-ls: -0.374px;
  /* body */
  --body-size: 17px;   --body-weight: 400; --body-lh: 1.47; --body-ls: -0.374px;
  /* caption */
  --cap-size: 14px;    --cap-weight: 400;  --cap-lh: 1.43;  --cap-ls: -0.224px;
  /* fine-print */
  --fine-size: 12px;   --fine-weight: 400; --fine-lh: 1.0;  --fine-ls: -0.12px;
}

/* ============================================================================
   SEMANTIC TYPE CLASSES — apply directly to elements
   ============================================================================ */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--hero-size); font-weight: var(--hero-weight);
  line-height: var(--hero-lh); letter-spacing: var(--hero-ls);
}
.t-display-lg, h1 {
  font-family: var(--font-display);
  font-size: var(--dlg-size); font-weight: var(--dlg-weight);
  line-height: var(--dlg-lh); letter-spacing: var(--dlg-ls);
}
.t-display-md, h2 {
  font-family: var(--font-text);
  font-size: var(--dmd-size); font-weight: var(--dmd-weight);
  line-height: var(--dmd-lh); letter-spacing: var(--dmd-ls);
}
.t-lead {
  font-family: var(--font-display);
  font-size: var(--lead-size); font-weight: var(--lead-weight);
  line-height: var(--lead-lh); letter-spacing: var(--lead-ls);
}
.t-lead-airy {
  font-family: var(--font-text);
  font-size: var(--airy-size); font-weight: var(--airy-weight);
  line-height: var(--airy-lh); letter-spacing: var(--airy-ls);
}
.t-tagline, h3 {
  font-family: var(--font-display);
  font-size: var(--tag-size); font-weight: var(--tag-weight);
  line-height: var(--tag-lh); letter-spacing: var(--tag-ls);
}
.t-body-strong, strong {
  font-family: var(--font-text);
  font-size: var(--bs-size); font-weight: var(--bs-weight);
  line-height: var(--bs-lh); letter-spacing: var(--bs-ls);
}
.t-body, p {
  font-family: var(--font-text);
  font-size: var(--body-size); font-weight: var(--body-weight);
  line-height: var(--body-lh); letter-spacing: var(--body-ls);
}
.t-caption {
  font-family: var(--font-text);
  font-size: var(--cap-size); font-weight: var(--cap-weight);
  line-height: var(--cap-lh); letter-spacing: var(--cap-ls);
}
.t-fine {
  font-family: var(--font-text);
  font-size: var(--fine-size); font-weight: var(--fine-weight);
  line-height: var(--fine-lh); letter-spacing: var(--fine-ls);
}

/* ============================================================================
   PRIMITIVES — the two button grammars + link
   ============================================================================ */

.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-size: var(--cap-size); font-weight: 600;
  letter-spacing: var(--cap-ls);
  background: var(--grad); color: var(--on-accent);
  border: none; border-radius: var(--r-pill);
  padding: 13px 24px; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-pill:hover { box-shadow: 0 8px 30px -6px var(--glow-violet); }
.btn-pill:active { transform: scale(var(--press-scale)); }
.btn-pill:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 2px; }

.btn-pill-ghost {
  background: var(--surface-2); color: var(--fg);
  border: 1px solid var(--border); box-shadow: none;
}
.btn-pill-ghost:hover { border-color: var(--border-strong); box-shadow: none; }

.btn-utility {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-size: var(--cap-size); font-weight: 400;
  letter-spacing: var(--cap-ls);
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 9px 18px; cursor: pointer;
  transition: transform var(--dur) var(--ease), border var(--dur) var(--ease);
}
.btn-utility:hover { border-color: var(--border-strong); }
.btn-utility:active { transform: scale(var(--press-scale)); }

.link {
  color: var(--accent); text-decoration: none; cursor: pointer;
  font-family: var(--font-text); font-size: var(--body-size);
  letter-spacing: var(--body-ls);
}
.link:hover { text-decoration: underline; }
.link-on-dark { color: var(--accent-on-dark); }

/* gradient text — brand highlight */
.text-grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; font-weight: 600;
}