/* ==========================================================================
   CMO Partners — Design Tokens
   Visual identity: Contour Intelligence
   Spec: docs/VISUAL-IDENTITY.md
   ========================================================================== */

/* Self-hosted so no request leaves for fonts.googleapis.com: one less
   handshake on the LCP path, and no third-party transfer to disclose. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Surfaces ------------------------------------------------------ */
  --c-bg: #fafaf8;           /* Warm White — page background */
  --c-surface: #ffffff;      /* raised cards */
  --c-surface-sunk: #f3f3f1; /* inset areas */
  --c-graphite: #111214;     /* dark sections */

  /* --- Lines --------------------------------------------------------- */
  --c-border: #e7e8ec;        /* Soft Gray — decorative dividers */
  --c-border-strong: #8e9098; /* interactive borders — meets 3:1 */
  /* The contour field sits behind headlines, so it has to stay under the
     text rather than compete with it. Kept deliberately faint — texture you
     notice second, never a pattern you read first. */
  --c-contour: #edeef2;

  /* --- Text ---------------------------------------------------------- */
  --c-text: #111214;        /* Graphite — 17.9:1 on bg, AAA */
  --c-text-muted: #5e6069;  /*            5.99:1 on bg, AA  */
  --c-text-invert: #fafaf8;

  /* --- Accent -------------------------------------------------------- *
   * Signature Pink is the brand colour but only reaches 2.98:1 on Warm
   * White, so it is reserved for graphics and display type 32px+.
   * Pink Ink is its accessible sibling for anything carrying text:
   * 5.17:1 behind white, 4.95:1 as text. Norway mandates WCAG 2.1 AA.
   * -------------------------------------------------------------------- */
  --c-pink: #ff4f8b;      /* Signature Pink — contours, nodes, charts */
  --c-pink-ink: #d60e58;  /* Pink Ink — buttons, links, pink text */
  --c-rose: #e9a0b6;      /* Muted Rose — secondary accent, gradients */
  --c-glass: #fde8f1;     /* Glass Tint — washes, hovers */

  /* On Graphite backgrounds Signature Pink reaches 6.0:1, so the pure
     brand pink is safe for text there. */
  --c-pink-on-dark: #ff4f8b;

  /* --- Liquid glass -------------------------------------------------- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.85);
  --glass-blur: 20px;
  --glass-shadow:
    0 8px 32px rgba(17, 18, 20, 0.08),
    0 1px 2px rgba(17, 18, 20, 0.04);

  /* --- Typography ---------------------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Fluid scale: mobile → desktop. Desktop values match the identity spec
     (H1 48/56, H2 32/40, H3 22/28, body 16/24, caption 12/16). */
  --t-h1: clamp(2rem, 1.3rem + 3vw, 3rem);           /* 32 → 48 */
  --t-h2: clamp(1.5rem, 1.1rem + 1.7vw, 2rem);       /* 24 → 32 */
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);  /* 20 → 22 */
  --t-body: 1rem;
  --t-body-lg: 1.125rem;
  --t-cap: 0.75rem;

  --lh-tight: 1.167;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  --tracking-display: -0.02em;
  --tracking-label: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* --- Space --------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Section rhythm — generous by default; minimalism needs the air */
  --section-y: clamp(4rem, 2rem + 8vw, 8rem);

  /* --- Layout -------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1400px;
  --container-text: 68ch;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --header-h: 72px;

  /* --- Radii --------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 8px;   /* buttons, inputs */
  --r-lg: 16px;  /* cards */
  --r-xl: 24px;  /* large panels */
  --r-full: 9999px;

  /* --- Elevation ----------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17, 18, 20, 0.05);
  --shadow-md: 0 4px 16px rgba(17, 18, 20, 0.07);
  --shadow-lg: 0 12px 40px rgba(17, 18, 20, 0.1);

  /* --- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 500ms;
  --dur-contour: 32s; /* contour drift cycle */
}

/* Dark sections opt in by setting this class; tokens flip so the same
   components work on Graphite without bespoke rules. */
.on-dark {
  --c-bg: #111214;
  --c-surface: #1b1c1f;
  --c-surface-sunk: #0b0c0d;
  --c-border: #2a2b2f;
  --c-border-strong: #6c6e76;
  --c-contour: #2a2b2f;
  --c-text: #fafaf8;
  --c-text-muted: #a8aab2;
  --c-text-invert: #111214;
  --c-pink-ink: #ff4f8b; /* pure brand pink is AA-safe on graphite */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}