@layer tokens {
  @font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/source-serif-4-var.woff2") format("woff2-variations");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter-var.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    /* Palette — Lavender Fields (imported design direction, AA-tuned) */
    --color-cream: #F4F0FB;          /* page background (soft lavender) */
    --color-cream-soft: #FFFFFF;     /* elevated surface / cards / header / panels */
    --color-alt: #FBF7EF;            /* warm cream alt-section bands */
    --color-ink: #393350;            /* primary text + footer bg (plum-grey) */
    --color-ink-soft: #5C5577;       /* secondary text */
    --color-ink-muted: #6E6884;      /* tertiary text — darkened from design #8E88A2 for WCAG AA */
    --color-line: #E8E1F3;           /* borders / dividers */
    --color-error: #B5403B;
    --color-success: #4A6B3A;        /* semantic "saved" green */

    /* Violet accent (CTAs, links, focus). primary-deep is the AA-safe solid
       (white text 5.5:1, link-on-bg 4.9:1); primary is the softer brand tint
       used for decorative fills. */
    --color-primary: #8B73D4;
    --color-primary-deep: #6F58BE;
    --color-primary-soft: #DCD2F4;

    /* Legacy warm token names retained but repointed to on-palette values, so
       any unaudited reference stays in the lavender family. */
    --color-sage: #B8D6C2;
    --color-sage-deep: #4A6B3A;      /* green retained for "saved" semantics */
    --color-terracotta: #E9C6DD;
    --color-terracotta-deep: #6F58BE;
    --color-sun: #F0D49A;            /* light-gold locale-notice band */

    /* Decorative hero blobs / dots */
    --color-blue: #AFC6E8;
    --color-green: #B8D6C2;
    --color-pink: #E9C6DD;

    /* Service-card tints + icon chips (home "How we can help" grid) */
    --svc-1: #EAE2FB; --svc-2: #E0EAF8; --svc-3: #E1EFE5;
    --svc-4: #F6E6F1; --svc-5: #F8EFDD; --svc-6: #E8E3F6;
    --svc-d-1: #8B73D4; --svc-d-2: #6E97D8; --svc-d-3: #6FA98A;
    --svc-d-4: #C77FA8; --svc-d-5: #CCA45E; --svc-d-6: #7E72C4;

    /* Staff avatar gradients */
    --av-a: #CDBDF0; --av-b: #B7D2E6; --av-c: #BFDDC8;

    /* Type */
    --font-serif: "Source Serif 4", "Cormorant Garamond", Georgia, serif;
    --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif;
    --type-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    --type-h2: clamp(2rem, 3vw + 1rem, 3rem);
    --type-h3: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    --type-h4: 1.25rem;
    --type-body: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
    --type-small: 0.875rem;
    --type-eyebrow: 0.875rem;
    --line-tight: 1.15;
    --line-body: 1.6;
    --tracking-tight: -0.02em;
    --tracking-loose: 0.15em;

    /* Spacing — 8px ramp */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Responsive breakpoints (W6).
       Mobile-first: base styles target ≤640px; @media (min-width: …) scales up.
       - bp-sm: phone landscape / small tablet
       - bp-md: tablet portrait — hamburger → flex-row threshold
       - bp-lg: tablet landscape / small laptop
       Caveat: @media queries cannot interpolate custom properties — these
       tokens are documentation; rule sites use the literal value. */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;

    /* Radii */
    --radius-1: 6px;
    --radius-2: 14px;
    --radius-3: 28px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-1: 0 1px 2px rgba(57,51,80,0.08);
    --shadow-2: 0 10px 30px -10px rgba(57,51,80,0.20);
    --shadow-3: 0 24px 60px -20px rgba(57,51,80,0.28);

    /* Motion */
    --ease-paper: cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* slow tail-out */
    --ease-ink: cubic-bezier(0.34, 1.05, 0.64, 1);        /* slight overshoot then settle */
    --ease-press: cubic-bezier(0.2, 0.7, 0.2, 1);         /* tight press/lift */
    --ease: var(--ease-paper);                            /* alias for back-compat */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --dur-1: 240ms;                                       /* was 180ms */
    --dur-2: 420ms;                                       /* was 320ms */
    --dur-3: 520ms;
    --dur-stamp: 520ms;                                   /* save confirmations */
    --dur-draw: 360ms;                                    /* ink underline draw */
    --dur-fold: 420ms;                                    /* chatbot unfurl */
    --scale-press: 0.97;                                  /* button active */
    --scale-lift: 1.02;                                   /* card hover */

    /* Canggih (Phase 4) — magnitudes for atmospheric depth + cinematic pacing.
       Calibrate during Task 9 tracer-bullet review; cut, don't raise. */
    --canggih-cursor-rest: 6px;
    --canggih-cursor-active: 12px;
    --canggih-cursor-opacity-rest: 0.7;
    --canggih-cursor-opacity-active: 0.9;
    --canggih-parallax-depth: 4px;
    --canggih-grain-opacity: 0.03;
    --canggih-fold-deg: 2deg;
    --canggih-load-duration: 2000ms;
    --canggih-header-h: 72px;

    /* Layout */
    --wrap-max: 80rem;
    --content-max: 44rem;

    /* Font-size scale (a11y toggle) */
    --fs-scale: 1;
  }

  html[data-fs="1"] { --fs-scale: 1; }
  html[data-fs="2"] { --fs-scale: 1.125; }
  html[data-fs="3"] { --fs-scale: 1.25; }
  body { font-size: calc(var(--type-body) * var(--fs-scale)); }
}