/* GENERATED by utils/tokens/build-tokens.mjs — do not edit by hand.
 * Source of truth: utils/tokens/tokens.json
 *
 * Colours marked wcagAdjusted in the source differ from the original design
 * guide, which failed WCAG 2.2 AA on six pairs in its light theme. The gate
 * that keeps them honest is utils/tokens/contrast.test.mjs.
 */

@layer tokens {
  :root {
    color-scheme: light;

    /* brand — decorative fills. --brand-accent is 2.86:1 on paper: never text. */
    --brand-accent: #E86A8E;
    --brand-accent-deep: #C8476C;

    /* surfaces + text */
    --c-ink: #191410;
    --c-paper: #FBF7F0;
    --c-cream: #F5EFE6;
    --c-card: #FFFFFF;
    --c-field: #FFFFFF;
    --c-muted: #756C61;
    --c-accent-text: #C23A61;
    --c-line: rgba(25, 20, 16, 0.14);
    --c-field-line: rgba(25, 20, 16, 0.47);
    --c-focus: #C23A61;

    /* type */
    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --size-display: clamp(2.75rem, 7.5vw, 4.5rem);
    --size-h1: clamp(2.125rem, 5vw, 3.25rem);
    --size-h2: clamp(1.625rem, 3.5vw, 2.125rem);
    --size-body: 1rem;
    --size-small: 0.875rem;
    --size-label: 0.781rem;
    --size-eyebrow: 0.75rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;
    --leading-tight: 0.95;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.55;
    --tracking-display: -0.02em;
    --tracking-normal: 0;
    --tracking-eyebrow: 0.22em;
    --tracking-kicker: 0.3em;

    /* layout */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.375rem;
    --space-lg: 2rem;
    --space-xl: 2.75rem;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.125rem;
    --radius-pill: 999px;
    --shadow-card: 0 1px 0 rgba(25,20,16,.04), 0 18px 40px -28px rgba(25,20,16,.5);

    /* motion — every animation must reference these */
    --motion-instant: 0ms;
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 500ms;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* targets + focus */
    --target-min: 24px;
    --target-comfortable: 44px;
    --focus-width: 3px;
    --focus-offset: 2px;
  }

  [data-theme='ink'] {
    color-scheme: dark;
    --c-ink: #F3ECE1;
    --c-paper: #1B1613;
    --c-cream: #141110;
    --c-card: #1F1A17;
    --c-field: #221D1A;
    --c-muted: #A8998A;
    --c-accent-text: #E86A8E;
    --c-line: rgba(243, 236, 225, 0.14);
    --c-field-line: rgba(243, 236, 225, 0.37);
    --c-focus: #E86A8E;
    --shadow-card: 0 1px 0 rgba(0,0,0,.4), 0 24px 50px -30px rgba(0,0,0,.8);
  }

  /* Honour a system preference when the user has not chosen explicitly. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      color-scheme: dark;
      --c-ink: #F3ECE1;
      --c-paper: #1B1613;
      --c-cream: #141110;
      --c-card: #1F1A17;
      --c-field: #221D1A;
      --c-muted: #A8998A;
      --c-accent-text: #E86A8E;
      --c-line: rgba(243, 236, 225, 0.14);
      --c-field-line: rgba(243, 236, 225, 0.37);
      --c-focus: #E86A8E;
      --shadow-card: 0 1px 0 rgba(0,0,0,.4), 0 24px 50px -30px rgba(0,0,0,.8);
    }
  }
}

@layer base {
  /* WCAG 2.2 SC 2.3.3. Collapsing durations to zero rather than deleting the
   * animation keeps state changes instant instead of leaving them unapplied. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --motion-fast: 0ms;
      --motion-base: 0ms;
      --motion-slow: 0ms;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* SC 2.4.7. The design guide specifies a focus ring; the prototype shipped
   * `outline: none` with no replacement. This is the replacement, applied
   * once, globally, so no component has to remember. */
  :focus-visible {
    outline: var(--focus-width) solid var(--c-focus);
    outline-offset: var(--focus-offset);
  }

  /* SC 2.5.8. Anything interactive clears the 24px minimum. */
  a,
  button,
  input,
  select,
  textarea,
  [role='button'],
  [role='radio'],
  [role='tab'] {
    min-block-size: var(--target-min);
  }
}