/* ============================================================
   IALF CPI™ — Design Tokens
   Locked system. Do not introduce colours, radii or greys
   outside this file.
   ============================================================ */

@layer tokens, base, components, sections, motion, utilities;

@layer tokens {
  :root {
    /* ---------- Colour ---------- */
    --color-ink-navy:        #0c1754;
    --color-electric-cobalt: #2545ff;
    --color-charcoal:        #171417;
    --color-warm-canvas:     #f9f8f6;
    --color-paper-white:     #ffffff;
    --color-cream-border:    #f0e9e1;
    --color-graphite:        #222222;
    --color-stone:           #969696;
    --color-smoke:           #cccccc;
    --color-lavender-mist:   #eaebf8;

    /* ---------- Surfaces ---------- */
    --surface-canvas: var(--color-warm-canvas);
    --surface-paper:  var(--color-paper-white);
    --surface-ink:    var(--color-ink-navy);

    /* ---------- Type families ----------
       Martinaplantijn  -> Newsreader  (humanist editorial serif, true italic)
       ABCFavorit       -> Inter Tight (geometric, compressible)
       Inter            -> Inter                                        */
    --font-display:    'Newsreader', 'GT Super Display', 'Tiempos Text', Georgia, serif;
    --font-sans-tight: 'Inter Tight', 'ABC Diatype', Inter, ui-sans-serif, system-ui, sans-serif;
    --font-inter:      'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ---------- Type scale ---------- */
    --text-caption:    12px;  --leading-caption:    1.4;
    --text-body-sm:    14px;  --leading-body-sm:    1.6;
    --text-body:       16px;  --leading-body:       1.6;
    --text-subheading: 20px;  --leading-subheading: 1.4;
    --text-heading-sm: 24px;  --leading-heading-sm: 1.4;  --tracking-heading-sm: -0.48px;
    --text-heading:    32px;  --leading-heading:    1.4;  --tracking-heading:    -0.64px;
    --text-heading-lg: 40px;  --leading-heading-lg: 1.2;  --tracking-heading-lg: -0.8px;
    --text-display:    48px;  --leading-display:    1.1;  --tracking-display:    -2.4px;
    --text-display-lg: 64px;  --leading-display-lg: 1;    --tracking-display-lg: -3.2px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    /* ---------- Spacing (8px base) ---------- */
    --spacing-8:   8px;   --spacing-16:  16px;  --spacing-24: 24px;
    --spacing-32:  32px;  --spacing-40:  40px;  --spacing-48: 48px;
    --spacing-56:  56px;  --spacing-64:  64px;  --spacing-80: 80px;
    --spacing-128: 128px;

    /* ---------- Layout ---------- */
    --page-max-width: 1200px;
    /* On a wide monitor a 1200px cap left ~350px of dead space either
       side of the nav and the hero. The shell opens up past 1500px. */
    --gutter:         clamp(20px, 5vw, 48px);
    --section-gap:    clamp(56px, 9vw, 128px);
    --card-padding:   clamp(24px, 3vw, 32px);
    --element-gap:    24px;

    /* ---------- Radii ---------- */
    --radius-sm:      2px;
    --radius-lg:      9px;
    --radius-cards:   16px;
    --radius-badges:  16px;
    --radius-inputs:  16px;
    --radius-images:  24px;
    --radius-plate:   40px;
    --radius-buttons: 100px;

    /* ---------- Warm tints ----------
       Concentrated bursts of colour against the restrained palette
       (August Health's device), drawn from 15five's warm gradient.
       These tint SURFACES ONLY — never text, never a CTA. Electric
       Cobalt remains the single action colour. */
    --tint-cream:    #fff2e8;
    --tint-peach:    #ffdacf;
    --tint-lavender: #eaebf8;
    --tint-sky:      #dfe4fb;
    --tint-mist:     #f0eaf7;

    /* ---------- Atmospheric washes ----------
       Depth comes from background washes, not heavy elevation. */
    --wash-warm: radial-gradient(120% 80% at 82% 6%, var(--tint-peach) 0%, transparent 58%),
                 radial-gradient(90% 70% at 4% 96%, var(--tint-lavender) 0%, transparent 62%);
    --wash-cool: radial-gradient(100% 70% at 10% 0%, var(--tint-sky) 0%, transparent 60%),
                 radial-gradient(90% 80% at 96% 90%, var(--tint-cream) 0%, transparent 58%);

    /* ---------- Elevation ----------
       Warm-tinted, not cool grey — the canvas is warm, so its
       shadows must be too. Doubled offsets give a soft, deep falloff
       without a heavy near-shadow. */
    --shadow-card:   0 2px 8px rgba(75, 68, 57, .05), 0 12px 28px rgba(75, 68, 57, .07);
    --shadow-widget: 0 4px 12px rgba(75, 68, 57, .07), 0 16px 40px rgba(75, 68, 57, .12);
    --shadow-plate:  0 8px 20px rgba(75, 68, 57, .06), 0 32px 64px rgba(75, 68, 57, .12);
    --shadow-nav:    0 1px 3px rgba(75, 68, 57, .06), 0 8px 28px rgba(75, 68, 57, .10);
    --shadow-lift:   0 12px 24px rgba(75, 68, 57, .10), 0 40px 72px rgba(75, 68, 57, .14);

    /* ---------- Motion ---------- */
    --ease-editorial: cubic-bezier(.22, 1, .36, 1);
    --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);
    --ease-inout:     cubic-bezier(.65, 0, .35, 1);
    --dur-fast:   200ms;
    --dur-base:   420ms;
    --dur-slow:   820ms;
    --dur-reveal: 1100ms;
  }

  @media (min-width: 1500px) { :root { --page-max-width: 1340px; } }
  @media (min-width: 1750px) { :root { --page-max-width: 1460px; } }

  /* Animatable custom properties.
     `--progress` and `--draw-x` MUST inherit: they are set on a
     container ([data-progress] / [data-draw]) and consumed by
     descendants — the loop ring, the bridge arc, the spine fill,
     the travelling dot. With inherits:false the container animated
     a value nothing could read, and those strokes never drew. */
  @property --progress { syntax: '<number>';     inherits: true;  initial-value: 0; }
  @property --draw-x   { syntax: '<number>';     inherits: true;  initial-value: 0; }
  @property --draw     { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
  @property --sweep    { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
  @property --count    { syntax: '<number>';     inherits: false; initial-value: 0; }
}