/* =========================================================================
   Source Agency — colors_and_type.css
   --------------------------------------------------------------------------
   Compiled flat from `@source-factory/design-source` tokens.ts. Use these
   variables anywhere — `var(--sf-color-primary)`, `var(--sf-font-display)`,
   `var(--sf-h1-size)`, etc. Semantic shortcuts at the bottom.

   Distinct from `@source-factory/brand-kernel` (per-tenant client-site
   theming) — these are the platform's own chrome.
   ========================================================================= */

/* --- Webfonts -------------------------------------------------------------
   WOFF2 only. Helvetica Now (Display + Text) for UI; ITC Caslon 224 Std
   Black for editorial accents (large pull quotes, the wordmark itself). */
@font-face { font-family: "Helvetica Now Display"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/HelveticaNowDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/HelveticaNowDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/HelveticaNowDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/HelveticaNowDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/HelveticaNowDisplay-ExtraBold.woff2") format("woff2"); }

@font-face { font-family: "Helvetica Now Text"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/HelveticaNowText-Light.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/HelveticaNowText-Regular.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/HelveticaNowText-Medium.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/HelveticaNowText-Bold.woff2") format("woff2"); }

@font-face { font-family: "ITC Caslon 224 Std"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/CASLON224STD-BLACK.woff2") format("woff2"); }

/* JetBrains Mono — open-source (OFL) variable font, provisioned via the
   FONT-POLICY `google-fonts` provider (Google-CDN WOFF2, saved locally). */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2"); }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* ---------- Colors ---------- */
  /* Brand — primary is the *highlight* color, used sparingly. */
  --sf-color-primary:        #0494E9;
  --sf-color-primary-hover:  #0379BC;
  --sf-color-primary-soft:   #E6F4FE;

  /* ------- Canonical brand neutrals (from the Source brand book) -------
     These five replace the generic black / white / gray ramp. They map to
     Pantone + CMJN + RAL references in the print brand book. */
  --sf-color-noir:         #0E171B;  /* Noir Source — Pantone 20-0194 TPM, RAL 9005 */
  --sf-color-gris-fer:     #70747B;  /* Gris Fer — Pantone Cool Gray 9 C, RAL 9023  */
  --sf-color-gris-perle:   #CFD1D3;  /* Gris Perle — Pantone 427 C, RAL 7047        */
  --sf-color-blanc-chaud:  #F2F2F2;  /* Blanc Chaud — RAL 9003                       */
  --sf-color-blanc:        #FFFFFF;  /* Blanc 100% — RAL 9016                        */

  /* Legacy aliases — kept so older tokens still resolve. */
  --sf-color-black:        var(--sf-color-noir);
  --sf-color-ink:          var(--sf-color-noir);
  --sf-color-white:        var(--sf-color-blanc);

  /* ------- Derived UI gray ramp -------
     Tints/shades interpolated from the canonical neutrals — for Studio
     chrome where the five-step brand palette isn't granular enough.
     Anchored on Noir Source (900), Gris Fer (500), Gris Perle (300),
     Blanc Chaud (50). */
  --sf-color-gray-50:        #F2F2F2;  /* = Blanc Chaud  */
  --sf-color-gray-100:       #E7E8E9;
  --sf-color-gray-200:       #DBDCDE;
  --sf-color-gray-300:       #CFD1D3;  /* = Gris Perle   */
  --sf-color-gray-400:       #A0A3A9;
  --sf-color-gray-500:       #70747B;  /* = Gris Fer     */
  --sf-color-gray-600:       #555A61;
  --sf-color-gray-700:       #3B4148;
  --sf-color-gray-800:       #232930;
  --sf-color-gray-900:       #0E171B;  /* = Noir Source  */

  /* Watermark tones — aliases onto the brand neutrals.
     The filigrane SVGs render in whichever tint you set; these are the
     canonical pairs (`gris-fer` darker watermark, `gris-perle` lighter). */
  --sf-color-filigrane-fer:    var(--sf-color-gris-fer);
  --sf-color-filigrane-perle:  var(--sf-color-gris-perle);

  /* Semantic */
  --sf-color-success:        #16A34A;
  --sf-color-warning:        #EAB308;
  --sf-color-danger:         #DC2626;

  /* Foreground / background semantic aliases */
  --sf-fg-1:    var(--sf-color-ink);        /* primary text */
  --sf-fg-2:    var(--sf-color-gray-700);   /* secondary text */
  --sf-fg-3:    var(--sf-color-gray-500);   /* tertiary / meta */
  --sf-fg-4:    var(--sf-color-gray-400);   /* placeholder / disabled */
  --sf-fg-inv:  var(--sf-color-white);      /* on dark surfaces */

  --sf-bg-1:    var(--sf-color-white);      /* canvas */
  --sf-bg-2:    var(--sf-color-gray-50);    /* raised cards on white */
  --sf-bg-3:    var(--sf-color-gray-100);   /* sunken / fields */
  --sf-bg-inv:  var(--sf-color-ink);        /* footers, dark sections */

  --sf-border-subtle:  var(--sf-color-gray-200);
  --sf-border-strong:  var(--sf-color-gray-300);
  --sf-border-ink:     var(--sf-color-ink);

  /* ---------- Type families ---------- */
  --sf-font-display: "Helvetica Now Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sf-font-body:    "Helvetica Now Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sf-font-accent:  "ITC Caslon 224 Std", "Playfair Display", "Times New Roman", Georgia, serif;
  --sf-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (major-third, base 16px) ---------- */
  --sf-text-xs:   0.75rem;     /* 12 */
  --sf-text-sm:   0.875rem;    /* 14 */
  --sf-text-base: 1rem;        /* 16 */
  --sf-text-lg:   1.125rem;    /* 18 */
  --sf-text-xl:   1.25rem;     /* 20 */
  --sf-text-2xl:  1.5rem;      /* 24 */
  --sf-text-3xl:  1.875rem;    /* 30 */
  --sf-text-4xl:  2.25rem;     /* 36 */
  --sf-text-5xl:  3rem;        /* 48 */
  --sf-text-6xl:  3.75rem;     /* 60 */
  --sf-text-7xl:  4.5rem;      /* 72 */
  --sf-text-8xl:  6rem;        /* 96 */

  --sf-lh-tight:    1.1; /* @kind other */
  --sf-lh-snug:     1.25; /* @kind other */
  --sf-lh-normal:   1.5; /* @kind other */
  --sf-lh-relaxed:  1.625; /* @kind other */
  --sf-lh-loose:    2; /* @kind other */

  --sf-track-tighter: -0.04em; /* @kind other */
  --sf-track-tight:   -0.02em; /* @kind other */
  --sf-track-normal:  0; /* @kind other */
  --sf-track-wide:    0.02em; /* @kind other */
  --sf-track-wider:   0.05em; /* @kind other */
  --sf-track-widest:  0.12em;   /* eyebrow / numbered section labels */

  /* ---------- Spacing (4px base) ---------- */
  --sf-space-px: 1px;
  --sf-space-1:  0.25rem;
  --sf-space-2:  0.5rem;
  --sf-space-3:  0.75rem;
  --sf-space-4:  1rem;
  --sf-space-5:  1.25rem;
  --sf-space-6:  1.5rem;
  --sf-space-8:  2rem;
  --sf-space-10: 2.5rem;
  --sf-space-12: 3rem;
  --sf-space-16: 4rem;
  --sf-space-20: 5rem;
  --sf-space-24: 6rem;
  --sf-space-32: 8rem;
  --sf-space-40: 10rem;
  --sf-space-48: 12rem;

  /* ---------- Radii ---------- */
  --sf-radius-none: 0;
  --sf-radius-sm:   2px;
  --sf-radius-md:   4px;
  --sf-radius-lg:   8px;
  --sf-radius-xl:   12px;
  --sf-radius-2xl:  16px;
  --sf-radius-full: 9999px;

  /* ---------- Shadows / elevation ---------- */
  --sf-shadow-none: none;
  --sf-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.04);
  --sf-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
  --sf-shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.08);
  --sf-shadow-xl:   0 24px 56px rgba(0, 0, 0, 0.12);
  --sf-shadow-ring: 0 0 0 3px var(--sf-color-primary-soft);

  /* ---------- Motion ---------- */
  --sf-easing:        cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */ /* confident */
  --sf-easing-micro:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* hovers / micro */
  --sf-duration-instant:    0ms; /* @kind other */
  --sf-duration-fast:       150ms; /* @kind other */
  --sf-duration-base:       250ms; /* @kind other */
  --sf-duration-slow:       400ms; /* @kind other */
  --sf-duration-deliberate: 600ms; /* @kind other */

  /* ---------- Z-index ---------- */
  --sf-z-base:    0; /* @kind other */
  --sf-z-raised:  10; /* @kind other */
  --sf-z-sticky:  100; /* @kind other */
  --sf-z-overlay: 1000; /* @kind other */
  --sf-z-modal:   1100; /* @kind other */
  --sf-z-toast:   1200; /* @kind other */
  --sf-z-tooltip: 1300; /* @kind other */

  /* ---------- Semantic type recipes ---------- */
  /* The "editorial" recipes (h1/h2 with Caslon) are reserved for marketing
     surfaces. Studio chrome uses the sans display variants below. */

  /* Editorial — landing-source, marketing, mastheads */
  --sf-h1-editorial-font:   var(--sf-font-accent);
  --sf-h1-editorial-size:   clamp(3rem, 7vw, 6rem);
  --sf-h1-editorial-weight: 900; /* @kind other */
  --sf-h1-editorial-lh:     var(--sf-lh-tight);
  --sf-h1-editorial-track:  var(--sf-track-tighter);

  /* Display — Studio chrome, dashboards, hero on operator surfaces */
  --sf-h1-size:    var(--sf-text-6xl);
  --sf-h1-weight:  500; /* @kind other */
  --sf-h1-lh:      var(--sf-lh-tight);
  --sf-h1-track:   var(--sf-track-tight);
  --sf-h1-font:    var(--sf-font-display);

  --sf-h2-size:    var(--sf-text-4xl);
  --sf-h2-weight:  500; /* @kind other */
  --sf-h2-lh:      var(--sf-lh-snug);
  --sf-h2-track:   var(--sf-track-tight);
  --sf-h2-font:    var(--sf-font-display);

  --sf-h3-size:    var(--sf-text-2xl);
  --sf-h3-weight:  500; /* @kind other */
  --sf-h3-lh:      var(--sf-lh-snug);
  --sf-h3-track:   var(--sf-track-tight);
  --sf-h3-font:    var(--sf-font-display);

  --sf-h4-size:    var(--sf-text-xl);
  --sf-h4-weight:  500; /* @kind other */
  --sf-h4-lh:      var(--sf-lh-snug);
  --sf-h4-track:   var(--sf-track-normal);
  --sf-h4-font:    var(--sf-font-display);

  --sf-body-size:    var(--sf-text-base);
  --sf-body-weight:  400; /* @kind other */
  --sf-body-lh:      var(--sf-lh-relaxed);
  --sf-body-track:   var(--sf-track-normal);
  --sf-body-font:    var(--sf-font-body);

  --sf-body-sm-size:   var(--sf-text-sm);
  --sf-body-sm-lh:     var(--sf-lh-normal);

  /* Eyebrow / numbered section label — the signature "01 | AGENCE MARKETING" treatment */
  --sf-eyebrow-size:    var(--sf-text-xs);
  --sf-eyebrow-weight:  800; /* @kind other */
  --sf-eyebrow-track:   var(--sf-track-widest);
  --sf-eyebrow-case:    uppercase; /* @kind other */
  --sf-eyebrow-font:    var(--sf-font-display);

  /* Button label */
  --sf-button-size:     var(--sf-text-sm);
  --sf-button-weight:   500; /* @kind other */
  --sf-button-track:    var(--sf-track-wider);
  --sf-button-case:     uppercase; /* @kind other */
  --sf-button-font:     var(--sf-font-body);

  /* Mono */
  --sf-code-size:    var(--sf-text-sm);
  --sf-code-font:    var(--sf-font-mono);
}

/* --- Base reset (opt-in via .sf-typography) ------------------------------ */
.sf-typography {
  font-family: var(--sf-font-body);
  font-size: var(--sf-body-size);
  line-height: var(--sf-body-lh);
  color: var(--sf-fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sf-typography h1, .sf-h1 { font-family: var(--sf-h1-font); font-size: var(--sf-h1-size); font-weight: var(--sf-h1-weight); line-height: var(--sf-h1-lh); letter-spacing: var(--sf-h1-track); margin: 0; }
.sf-typography h2, .sf-h2 { font-family: var(--sf-h2-font); font-size: var(--sf-h2-size); font-weight: var(--sf-h2-weight); line-height: var(--sf-h2-lh); letter-spacing: var(--sf-h2-track); margin: 0; }
.sf-typography h3, .sf-h3 { font-family: var(--sf-h3-font); font-size: var(--sf-h3-size); font-weight: var(--sf-h3-weight); line-height: var(--sf-h3-lh); letter-spacing: var(--sf-h3-track); margin: 0; }
.sf-typography h4, .sf-h4 { font-family: var(--sf-h4-font); font-size: var(--sf-h4-size); font-weight: var(--sf-h4-weight); line-height: var(--sf-h4-lh); letter-spacing: var(--sf-h4-track); margin: 0; }
.sf-typography p,  .sf-body { font-family: var(--sf-body-font); font-size: var(--sf-body-size); line-height: var(--sf-body-lh); margin: 0; }
.sf-typography code, .sf-code { font-family: var(--sf-code-font); font-size: var(--sf-code-size); }
.sf-h1-editorial { font-family: var(--sf-h1-editorial-font); font-weight: var(--sf-h1-editorial-weight); font-size: var(--sf-h1-editorial-size); line-height: var(--sf-h1-editorial-lh); letter-spacing: var(--sf-h1-editorial-track); margin: 0; }
.sf-eyebrow { font-family: var(--sf-eyebrow-font); font-size: var(--sf-eyebrow-size); font-weight: var(--sf-eyebrow-weight); letter-spacing: var(--sf-eyebrow-track); text-transform: var(--sf-eyebrow-case); color: var(--sf-fg-2); }
.sf-button-label { font-family: var(--sf-button-font); font-size: var(--sf-button-size); font-weight: var(--sf-button-weight); letter-spacing: var(--sf-button-track); text-transform: var(--sf-button-case); }