/* ==========================================================================
   FANGIN — Design Tokens
   Source of truth: FANGIN Brand Direction 1.0 board.
   Do not introduce new colours or type families outside this file —
   every other stylesheet should reference these custom properties only.
   When this project is migrated into WordPress, this file can be enqueued
   as-is (e.g. assets/css/tokens.css) or its variables copied into the
   theme's :root block.
   ========================================================================== */

/* Self-hosted (not loaded from fonts.googleapis.com) — found on a real
   device that the site's condensed display type was silently falling back
   to a plain system sans-serif on mobile. Root cause: the previous
   <link href="https://fonts.googleapis.com/..."> in index.html's <head>
   depends on that request succeeding at page-load time, which several
   common mobile contexts don't reliably allow (in-app browsers/WebViews —
   Instagram, Facebook, etc. — routinely block or delay third-party font
   requests; the same failure mode reproduced in this project's own sandbox
   network, which sits behind an allowlist that fonts.googleapis.com isn't
   on). Once that request fails, the browser falls through the entire
   --font-display stack ('Anton' -> 'Archivo Black' -> Impact) to generic
   sans-serif, since none of those are installed as system fonts on
   Android/iOS — which is exactly the "wrong font on mobile" the brief
   flagged. Self-hosting removes the external dependency entirely: these
   .woff2 files (Anton 400; Inter 300/400/500/600/700 — the only weights
   actually used anywhere in the CSS) are bundled with the site itself, so
   they load the same way as any other local asset, on any device, in any
   browser context, online or not. Sourced from the same open-license
   (OFL) Google Fonts files via the @fontsource npm packages — same exact
   typeface, just delivered locally instead of fetched live. index.html's
   <head> no longer links fonts.googleapis.com at all. Inter 300 is used by
   the SF Plumbing case study's own light-weight copy (sf-case.css's
   .sc-chapter-intro/.sc-quote) — self-hosted here for the same reason as
   every other weight above. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/inter-latin-300-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

/* Cormorant Garamond — used only by the Tepper Psychology case study
   (assets/css/tepper-case.css), for the editorial serif headings that
   showcase Karen Tepper's own brand type inside that one page. Declared
   here rather than in tepper-case.css to match this file's own rule that
   every @font-face lives in tokens.css regardless of which page actually
   needs it (Anton above is homepage-only and still lives here for the
   same reason) — and self-hosted for the exact reason explained in this
   file's own comment above fonts.googleapis.com isn't reachable from this
   project's sandbox network, so these are the OFL-licensed
   @fontsource/cormorant-garamond files, same delivery method as Anton/
   Inter. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}

/* Montserrat 600 — used only by the Tepper Psychology "contour story"
   scroll section (assets/css/tepper-case.css's .tcs styles, embedded
   verbatim from Nicole's live tepperpsychology.com.au build) for its small
   accent/label type (stage numbers, the closing link). The embed's own
   markup ships a fonts.googleapis.com <link> for this exact family/weight;
   that link is dropped when the embed is wired into the theme and this
   self-hosted face is used instead, for the same reason every other font
   on this site is self-hosted (see this file's own comment above). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
}

:root {
  /* ---- Brand colour palette (exact hex from brand board) ---- */
  --color-ink: #111111;        /* INK */
  --color-bone: #F3EFE7;       /* BONE */
  --color-acid: #DFFF00;       /* ACID — full-brightness, never darkened. Fails WCAG
                                   directly on bone as text (1.0:1) — for readable
                                   acid-toned copy on cream, pair it with a solid
                                   ink block instead (see .kw-block-ink in
                                   mowermerch-story.css) rather than darkening the
                                   colour itself. Bright acid stays reserved for
                                   large visual accents, animation, dots and
                                   decorative moments. */
  --color-periwinkle: #8B8CFF; /* PERIWINKLE — used for "CONVERT" */

  --color-bg: var(--color-bone);
  --color-fg: var(--color-ink);

  /* ---- Type families ----
     Display: DRUK (brand board) — approximated with Anton (heavy,
     condensed grotesk) until licensed Druk files are supplied.
     Body: Inter, as specified directly on the brand board. */
  --font-display: 'Anton', 'Archivo Black', Impact, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Fluid type scale ---- */
  --fs-hero-display: clamp(3.5rem, 9vw + 1rem, 11.5rem);
  --fs-nav: 0.8rem;
  --fs-meta: 0.75rem;
  --fs-body: 1rem;

  /* ---- Layout ---- */
  --header-height: 88px;
  --edge-gutter: clamp(20px, 4vw, 48px);
  --max-content-width: 1600px;

  /* ---- Motion ---- */
  --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-base: 0.6s;
}