/* ============================================================
   ClicTell design tokens
   Generated from ClicTell Brand Kit/CLAUDE.md — the single
   source of truth. Do not add values here that are not in the
   Brand Kit. If a new value is needed, add it to the Brand Kit
   first, then mirror it here.
   ============================================================ */

/* --- Space Grotesk, self-hosted (weights 300-700) ----------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/SpaceGrotesk-Light.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/SpaceGrotesk-Regular.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/SpaceGrotesk-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2')}

:root{
  /* --- Primary palette (60/30/10) --- */
  --ct-purple:#7300FF;
  --ct-black:#000000;
  --ct-white:#FFFFFF;

  /* --- Support tints: surfaces, charts, states only --- */
  --ct-purple-400:#9F4DFF;
  --ct-lilac:#D8B8FF;
  --ct-faint:#F3EBFF;

  /* --- Neutral ramp: nine neutrals, one job each --- */
  --ct-ink:#0A0A0A;          /* ALL heading text on light */
  --ct-card-dark:#111113;
  --ct-body:#4A4A50;
  --ct-gray:#6E6E73;
  --ct-secondary-dark:#A8A8B2;
  --ct-tertiary-dark:#77777E;
  --ct-card-light:#FAFAFC;
  --ct-line:#E8E8EC;

  /* --- Gradients: always start at pure purple, 0deg or 45deg, two stops --- */
  --ct-grad-primary:linear-gradient(90deg,#7300FF,#9F4DFF);
  --ct-grad-dark:linear-gradient(45deg,#7300FF,#000000);
  --ct-grad-soft:linear-gradient(90deg,#7300FF,#D8B8FF);

  /* --- Typeface --- */
  --ct-font:'Space Grotesk',Arial,Helvetica,sans-serif;
  --ct-w-light:300; --ct-w-regular:400; --ct-w-medium:500;
  --ct-w-semibold:600; --ct-w-bold:700;

  /* --- Web type scale ---
     Headings interpolate between the Brand Kit's mobile and desktop values
     instead of switching at 768px. The step change left a dead band roughly
     770-1100px where a heading still rendered at its full desktop size inside a
     column that had already narrowed, and 56px "communication" overflowed its
     column on the homepage. clamp() bounds are exactly the kit's two published
     values, so nothing renders outside the documented scale. */
  --ct-hero-size:clamp(40px,5vw,64px);      --ct-hero-track:-0.02em;   --ct-hero-lh:1.02;
  --ct-display-size:clamp(34px,4.4vw,56px); --ct-display-track:-0.02em;--ct-display-lh:1.06;
  --ct-h1-size:clamp(30px,3.4vw,44px);      --ct-h1-track:-0.015em;    --ct-h1-lh:1.05;
  --ct-h2-size:clamp(24px,2.5vw,32px);      --ct-h2-track:-0.01em;     --ct-h2-lh:1.10;
  --ct-h3-size:clamp(19px,1.7vw,22px);      --ct-h3-track:normal;      --ct-h3-lh:1.20;
  --ct-lead-size:20px;    --ct-lead-lh:1.45;
  --ct-body-size:17px;    --ct-body-lh:1.55;
  --ct-caption-size:14px; --ct-caption-lh:1.40;
  --ct-eyebrow-size:13px; --ct-eyebrow-track:0.30em; --ct-eyebrow-lh:1.20;
  --ct-button-size:16px;

  /* --- 8pt spacing scale --- */
  --ct-space-1:4px;  --ct-space-2:8px;  --ct-space-3:16px; --ct-space-4:24px;
  --ct-space-5:40px; --ct-space-6:64px; --ct-space-7:96px;

  /* --- Grid --- */
  --ct-grid-cols:12; --ct-grid-margin:64px; --ct-grid-gutter:24px;
  --ct-max-width:1280px;

  /* --- Cards: 20px from 2026-08-17, panels 32px --- */
  --ct-radius-card:20px;
  --ct-radius-panel:32px;
  --ct-radius-pill:999px;

  /* --- Derived surfaces: tints of approved colours, not new colours ---
     Each is a mix of two Brand Kit values, so no colour enters here that
     the kit does not already carry. Used for dark-surface fills where a
     flat neutral would disappear against the card behind it. */
  --ct-purple-on-black-30:color-mix(in srgb,#7300FF 30%,#000000);
  --ct-purple-on-black-12:color-mix(in srgb,#7300FF 12%,#000000);
  --ct-dot-lilac:color-mix(in srgb,#D8B8FF 28%,transparent);
  --ct-hatch-purple:color-mix(in srgb,#7300FF 22%,transparent);
  --ct-numeral-ghost:color-mix(in srgb,#9F4DFF 55%,#000000);

  /* --- Surface washes, added 2026-08-17 ---
     NOT the three brand gradients above. Those are expressive: hero moments,
     CTAs, key graphics, one per composition, 0deg or 45deg, always starting at
     pure purple. These are section backgrounds — lighting, not statement — and
     they exist because flat fills did not match the build being ported. Each is
     a mix of two Brand Kit values, so no new colour enters. Brand Kit §5. */
  --ct-tint-soft:color-mix(in srgb,#F3EBFF 55%,#FFFFFF);
  --ct-wash-tint:linear-gradient(180deg,#FFFFFF 0%,color-mix(in srgb,#F3EBFF 70%,#FFFFFF) 100%);
  --ct-wash-dark-foot:linear-gradient(180deg,#000000 45%,color-mix(in srgb,#7300FF 40%,#000000) 100%);
  --ct-wash-dark-head:linear-gradient(180deg,color-mix(in srgb,#7300FF 52%,#000000) 0%,#000000 100%);
  --ct-glow-hero:radial-gradient(ellipse 80% 55% at 50% 108%,color-mix(in srgb,#7300FF 62%,#000000) 0%,transparent 72%);
}

@media (max-width:768px){
  :root{
    /* Headings are already at their clamp minimum by this width; the values are
       restated so the mobile column of the Brand Kit table stays literal. */
    --ct-hero-size:40px; --ct-display-size:34px;
    --ct-h1-size:30px; --ct-h2-size:24px; --ct-h3-size:19px;
    --ct-lead-size:18px; --ct-body-size:16px; --ct-caption-size:13px;
    --ct-eyebrow-size:12px; --ct-grid-margin:24px;
  }
}