@layer tokens, base, components, utilities;

@layer tokens {
  :root {
    /* ---- Colour ---------------------------------------------------------
       Six values, no more. Blue is an interaction accent, never a surface. */
    --color-primary: #180093;
    --color-primary-pressed: #130076;
    --color-black: #000000;
    --color-grey-300: #494949;
    --color-grey-200: #959595;
    /* Sits between 200 and 300 purely so placeholder text and a resting input
       border can clear WCAG AA. grey-200 is 2.996:1 on white, which is under
       both 1.4.3 and 1.4.11; this is 4.54:1. Not for body copy — that is
       grey-300. */
    --color-grey-250: #767676;
    --color-grey-100: #f3f3f3;
    --color-white: #ffffff;

    /* Semantic roles — components reference these, never the raw values. */
    --surface-page: var(--color-grey-100);
    --surface-raised: var(--color-white);
    --surface-inverse: var(--color-black);
    --text-primary: var(--color-black);
    --text-secondary: var(--color-grey-300);
    --text-disabled: var(--color-grey-200);
    --text-on-dark: var(--color-white);
    --border-default: var(--color-grey-200);
    --border-strong: var(--color-black);
    --link-hover: var(--color-primary);

    /* ---- Type ----------------------------------------------------------- */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-numeric: "Inter Tight", "Inter", system-ui, sans-serif;

    --weight-light: 300;
    --weight-medium: 500;
    --weight-bold: 700;

    --size-display: clamp(2.75rem, 1.52rem + 5.26vw, 6.25rem);
    --size-stat: clamp(3.5rem, 2.53rem + 4.13vw, 6.25rem);
    --size-h2: clamp(2.125rem, 1.55rem + 2.44vw, 3.75rem);
    --size-h3: clamp(1.75rem, 1.44rem + 1.31vw, 2.625rem);
    --size-h4: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);
    --size-h5: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);
    --size-h6: 1.125rem;
    --size-body: 1.125rem;
    --size-body-sm: 1rem;
    --size-caption: 0.8125rem;

    --leading-display: 1.2;
    --leading-tight: 1.3;
    --leading-body: 1.5;

    /* ---- Space — 4px grid ----------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-30: 7.5rem;
    --space-32: 8rem;
    --space-40: 10rem;

    /* ---- Radius ---------------------------------------------------------
       The clipped top-right corner is the signature. Never make it uniform. */
    /* Broken out so a nested element can derive its own radius from the
       parent's corner minus the gap, instead of guessing a value. */
    --radius-card-corner: 30px;
    --radius-card-corner-lg: 50px;
    --radius-card-notch: 70px;

    --radius-card:
      var(--radius-card-corner) var(--radius-card-notch)
      var(--radius-card-corner) var(--radius-card-corner);
    --radius-card-lg:
      var(--radius-card-corner-lg) var(--radius-card-notch)
      var(--radius-card-corner-lg) var(--radius-card-corner-lg);
    --radius-block: 28px;
    --radius-inset: 16px;
    --radius-pill: 100px;
    --radius-full: 50%;

    /* ---- Border ---------------------------------------------------------
       Native `dashed` renders a browser-chosen pattern — dense at hairline
       weights and not tunable — so every dashed rule is drawn as a repeating
       gradient off these two values. */
    --hairline: 1px;
    --dash: 12px;
    --dash-gap: 7px;

    /* The layer diagram's dashes are a heavier, longer version of the same. */
    --dash-plane: 14px;
    --dash-plane-gap: 9px;
    --dash-plane-weight: 4px;

    /* ---- Control sizes -------------------------------------------------- */
    --control-icon-lg: 100px;
    --control-icon-md: 72px;
    --control-icon-sm: 52px;

    /* ---- Motion --------------------------------------------------------- */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Drawing the construction marks. The hero's rules are drawn on load over
       --duration-draw, offset from each other by --stagger-draw. Every rule
       below the hero is drawn by scroll position instead, finishing after it
       has travelled --draw-range through the viewport — that is the one knob
       for making the whole page's drawing faster or slower. */
    --duration-draw: 700ms;
    --stagger-draw: 120ms;
    --draw-range: cover 0% cover 30%;

    /* Shared by the underline in base.css and the drawn hover underline, so
       the two can never drift apart. */
    --underline-offset: 0.2em;

    /* ---- Focus ---------------------------------------------------------- */
    --focus-width: 2px;
    --focus-offset: 3px;
    --focus-color: var(--color-primary);

    /* ---- Layout --------------------------------------------------------- */
    --measure: 62ch;
    --frame-inset: clamp(0.75rem, 0.4rem + 2.9vw, 3rem);
    /* Inset from the aligned box to the text column. Every element that has to
       sit on that column reads this one value. */
    --column-pad: var(--space-20);
    /* Distance from a full-bleed element's own edge to that text column. The
       100% resolves against whichever element uses it. */
    --column-offset: calc(
      max(var(--frame-inset), (100% - var(--container-max)) / 2) + var(--column-pad)
    );
    --container-max: 1440px;
    --gutter: clamp(1.25rem, 0.5rem + 3vw, 5rem);
  }
}

@layer tokens {
  @media (width < 64rem) {
    :root { --column-pad: var(--space-6); }
  }
}