/* =====================================================================
   SIVRA STUDIOS — design tokens
   Figma variables + text styles (read 2026-10-06) to CSS custom properties to Webflow Variables (collection "Sivra").
   Rules: Satoshi only (self-hosted), transitions + GSAP only (no keyframe animations), Webflow breakpoints only (991 / 767 / 479 + 1280 / 1440 / 1920).
   Load order: tokens.css to base.css to utilities.css to components.css to pages.css to sivra.css (custom code, last)
   ===================================================================== */

/* ---------- Fonts (fonts/ to /fonts/, preload Satoshi-Medium in <head>) ---------- */
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Medium.woff2")  format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Bold.woff2")    format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- color (Figma color/*) ---------- */
  --sv-ink:    #010B13;   /* color/ink — Rich Black */
  --sv-paper:  #EBF1F5;   /* color/paper — Powder White */
  --sv-blue-slate: #536878; /* color/blue-slate — the brand colour itself (client pages re-point --sv-accent, sivra.css §17) */
  --sv-accent: var(--sv-blue-slate);   /* color/accent — Blue Slate: underlines, selection, pills, dots, map pin */
  --sv-slate-deep: #2A3A45; /* color/slate-deep — 50% Ink + 50% Blue Slate: Service Card tone (owner request #7) */
  --sv-slate-mist: #9FACB6; /* color/slate-mist — 50% Blue Slate + 50% Powder White: Service Card tone, ink text */
  --sv-client: #B3261E;   /* palette/client-sample — placeholder; the CMS Color field overrides per case study */
  --sv-on-client: #EBF1F5;

  /* ---------- tints — alpha baked in (Figma tint/*) ---------- */
  --sv-ink-04: #010B130A; --sv-ink-08: #010B1314; --sv-ink-16: #010B1329; --sv-ink-24: #010B133D;
  --sv-ink-28: #010B1347; --sv-ink-40: #010B1366; --sv-ink-50: #010B1380; --sv-ink-55: #010B138C; --sv-ink-60: #010B1399;
  --sv-ink-66: #010B13A8; --sv-ink-75: #010B13BF; --sv-ink-80: #010B13CC;
  --sv-paper-08: #EBF1F514; --sv-paper-10: #EBF1F51A; --sv-paper-12: #EBF1F51F; --sv-paper-16: #EBF1F529; --sv-paper-22: #EBF1F538; --sv-paper-30: #EBF1F54D;
  --sv-paper-40: #EBF1F566; --sv-paper-55: #EBF1F58C; --sv-paper-60: #EBF1F599; --sv-paper-66: #EBF1F5A8;
  --sv-paper-75: #EBF1F5BF; --sv-paper-80: #EBF1F5CC;
  --sv-accent-24: #5368783D; --sv-accent-40: #53687866; --sv-blue-slate-24: #5368783D;

  /* ---------- semantic (dark sections / client pages override on their wrapper) ---------- */
  --bg-color:  var(--sv-paper);
  --txt-color: var(--sv-ink);
  --hairline:  var(--sv-ink-16);
  --hairline-strong: var(--sv-ink-28);
  --muted:     var(--sv-ink-66);
  --muted-55:  var(--sv-ink-55);
  --surface:   var(--sv-ink-04);
  --surface-media: var(--sv-ink-08);
  --underline: 2px;          /* nav + plain links (owner audit 2026-10-07: was 3px) */
  --underline-lg: 3px;       /* 64px menu-overlay links (was 4px) */

  /* short aliases used by the effects / nav files */
  --ink: var(--sv-ink); --paper: var(--sv-paper); --accent: var(--sv-accent);

  /* ---------- spacing (Figma space/*) ---------- */
  --sv-space-4: 4px;   --sv-space-8: 8px;   --sv-space-12: 12px; --sv-space-16: 16px; --sv-space-20: 20px; --sv-space-24: 24px;
  --sv-space-32: 32px; --sv-space-40: 40px; --sv-space-48: 48px; --sv-space-64: 64px; --sv-space-96: 96px; --sv-space-128: 128px; --sv-space-160: 160px;
  --sv-gutter: 64px;         /* 32 ≤991 · 24 ≤479 */
  --sv-container: 1312px;    /* 1440 − 2×64 */
  --sv-container-max: 1440px;
  --sv-section-lg: 128px;    /* 96 ≤991 · 64 ≤767 */
  --sv-section-md: 96px;     /* 64 · 48 */
  --sv-section-sm: 64px;     /* 48 · 32 */
  --sv-hero-top: 200px;      /* 160 ≤991 · 128 ≤767 — room for the fixed nav */
  --sv-grid-gap: 24px;       /* bento · 16 ≤767 */
  --sv-card-gap: 32px;       /* card grids · 24 ≤991 · 16 ≤767 */

  /* ---------- radius (Figma radius/*) ---------- */
  --sv-radius-0: 0; --sv-radius-8: 8px; --sv-radius-12: 12px; --sv-radius-16: 16px; --sv-radius-24: 24px; --sv-radius-pill: 999px;

  /* ---------- motion ---------- */
  --sv-ease-out: cubic-bezier(.25, 1, .5, 1);
  --sv-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --sv-dur-fast: .25s; --sv-dur: .35s; --sv-dur-slow: .6s;

  /* ---------- type (16 Figma text styles; headings fluid between 479 and 1440, fixed above) ---------- */
  --sv-font: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sv-text-display-xl: clamp(60px, 11.6vw, 168px); --sv-lh-display-xl: .9;  --sv-ls-display-xl: -.045em;   /* Display/XL 168 */
  --sv-text-display-l:  clamp(56px, 8.3vw, 120px);  --sv-lh-display-l: .92;  --sv-ls-display-l: -.04em;     /* Display/L 120 */
  --sv-text-h1: clamp(40px, 5.6vw, 80px);  --sv-lh-h1: .98;  --sv-ls-h1: -.03em;    /* Heading/H1 80 */
  --sv-text-h2: clamp(32px, 3.9vw, 56px);  --sv-lh-h2: 1.04; --sv-ls-h2: -.025em;   /* Heading/H2 56 */
  --sv-text-h3: clamp(26px, 2.5vw, 36px);  --sv-lh-h3: 1.12; --sv-ls-h3: -.015em;   /* Heading/H3 36 */
  --sv-text-h4: clamp(20px, 1.7vw, 24px);  --sv-lh-h4: 1.24; --sv-ls-h4: -.01em;    /* Heading/H4 24 */
  --sv-text-stat: clamp(56px, 7.2vw, 104px); --sv-lh-stat: .96; --sv-ls-stat: -.04em; /* Stat/Number 104 */
  --sv-text-large: 22px;  --sv-lh-large: 1.45; --sv-ls-large: -.005em;  /* Body/Large (20 ≤767) */
  --sv-text-body: 17px;   --sv-lh-body: 1.55;                           /* Body/Default */
  --sv-text-small: 14px;  --sv-lh-small: 1.5;                           /* Body/Small */
  --sv-text-nav: 15px;    --sv-text-button: 15px; --sv-text-button-sm: 14px; /* Label/Nav · Label/Button */
  --sv-text-eyebrow: 13px; --sv-lh-eyebrow: 1.2; --sv-ls-eyebrow: .08em;    /* Label/Eyebrow (uppercase) */
  --sv-text-menu: clamp(40px, 4.4vw, 64px);                                /* Menu link 64 */
  --sv-weight-regular: 400; --sv-weight-medium: 500; --sv-weight-bold: 700;
}

/* ---------- theme switches (set on a wrapper; everything inside reads the semantic vars) ---------- */
.section-dark, .is-dark, .page-wrapper.is-dark, .background-color-ink {
  --bg-color: var(--sv-ink); --txt-color: var(--sv-paper);
  --hairline: var(--sv-paper-16); --hairline-strong: var(--sv-paper-22); --muted: var(--sv-paper-66); --muted-55: var(--sv-paper-55);
  --surface: var(--sv-paper-08); --surface-media: var(--sv-paper-10);
  background-color: var(--bg-color); color: var(--txt-color);
}
.page-wrapper.is-client, .is-client {
  --bg-color: var(--client, var(--sv-client)); --txt-color: var(--on-client, var(--sv-on-client));
  --hairline: var(--sv-paper-16); --hairline-strong: var(--sv-paper-22); --muted: var(--sv-paper-66); --muted-55: var(--sv-paper-55);
  --surface: var(--sv-paper-08); --surface-media: var(--sv-paper-10);
  background-color: var(--bg-color); color: var(--txt-color);
}
.is-paper, .background-color-paper {
  --bg-color: var(--sv-paper); --txt-color: var(--sv-ink);
  --hairline: var(--sv-ink-16); --hairline-strong: var(--sv-ink-28); --muted: var(--sv-ink-66); --muted-55: var(--sv-ink-55);
  --surface: var(--sv-ink-04); --surface-media: var(--sv-ink-08);
  background-color: var(--bg-color); color: var(--txt-color);
}

/* ---------- responsive token values (Webflow breakpoints only) ---------- */
@media screen and (max-width: 991px) {
  :root { --sv-gutter: 32px; --sv-section-lg: 96px; --sv-section-md: 64px; --sv-section-sm: 48px; --sv-hero-top: 160px; --sv-card-gap: 24px; }
}
@media screen and (max-width: 767px) {
  :root { --sv-section-lg: 64px; --sv-section-md: 48px; --sv-section-sm: 32px; --sv-hero-top: 128px; --sv-text-large: 20px; --sv-grid-gap: 16px; --sv-card-gap: 16px; }
}
@media screen and (max-width: 479px) {
  :root {
    --sv-gutter: 24px;
    --sv-text-display-xl: 60px; --sv-lh-display-xl: .94; --sv-ls-display-xl: -.035em;   /* Mobile/Display */
    --sv-text-display-l: 60px;  --sv-lh-display-l: .94;  --sv-ls-display-l: -.035em;
    --sv-text-h2: 38px; --sv-lh-h2: 1.06; --sv-ls-h2: -.02em;                           /* Mobile/H2 */
    --sv-text-h3: 26px; --sv-lh-h3: 1.18; --sv-ls-h3: -.01em;                           /* Mobile/H3 */
    --sv-text-menu: 38px;
  }
}