@layer tokens, base, layout, chrome, components, motion, utilities;

@layer tokens {
  :root {
    --c-ink-900: #0B1220;
    --c-ink-700: #1C2536;
    --c-ink-500: #3A4558;
    --c-steel-500: #5C6B7A;
    --c-steel-300: #9AA6B2;
    --c-line: #DCE3EA;
    --c-line-strong: #B8C2CC;
    --c-paper: #F4F6F8;
    --c-paper-sunk: #E8EEF3;
    --c-surface: #FFFFFF;
    --c-accent: #00B4D8;
    --c-accent-deep: #0096B4;
    --c-accent-tint: #D6F4FB;
    --c-danger: #C0392B;
    --c-success: #1F7A4D;

    --color-bg: var(--c-paper);
    --color-surface: var(--c-surface);
    --color-surface-sunk: var(--c-paper-sunk);
    --color-text: var(--c-ink-900);
    --color-text-muted: var(--c-steel-500);
    --color-text-inverse: #F4F6F8;
    --color-border: var(--c-line);
    --color-border-hover: var(--c-ink-900);
    --color-accent: var(--c-accent);
    --color-on-accent: var(--c-ink-900);
    --color-scrim: rgb(11 18 32 / 0.55);

    --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
    --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-display: clamp(2.5rem, 5.4vw, 4.75rem);
    --fs-h1: clamp(2rem, 4vw, 3.25rem);
    --fs-h2: clamp(1.625rem, 2.6vw, 2.375rem);
    --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
    --fs-h4: 1.25rem;
    --fs-lead: clamp(1.0625rem, 1.1vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.75rem;
    --fs-chip: 0.6875rem;

    --lh-display: 1.02;
    --lh-heading: 1.12;
    --lh-snug: 1.35;
    --lh-body: 1.55;
    --lh-relaxed: 1.7;

    --tracking-display: -0.025em;
    --tracking-heading: -0.01em;
    --tracking-chip: 0.1em;

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

    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-14: 3.5rem;
    --sp-16: 4rem;
    --sp-18: 4.5rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;
    --sp-40: 10rem;

    --section-y: clamp(4.5rem, 8vw, 8rem);
    --section-gap-inner: clamp(2rem, 3.2vw, 3.5rem);
    --stack-gap: var(--sp-3);
    --grid-gap: clamp(1rem, 2.2vw, 2rem);

    --container-max: 72.5rem;
    --container-wide: 90rem;
    --reading-max: 45rem;
    --form-col: 32.5rem;
    --gutter: var(--sp-5);
    --header-h: 4rem;
    --grid-cols: 12;

    --r-xs: 4px;
    --r-sm: 8px;
    --r-btn: 10px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    --bw-hairline: 1px;
    --bw-strong: 2px;
    --shadow-1: 0 1px 2px rgb(11 18 32 / 0.05);
    --shadow-2: 0 8px 24px rgb(11 18 32 / 0.08);
    --shadow-3: 0 24px 48px rgb(11 18 32 / 0.18);
    --focus-ring: 0 0 0 3px rgb(0 180 216 / 0.75);
    --focus-offset: 2px;

    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 280ms;
    --dur-4: 480ms;
    --dur-5: 700ms;
    --stagger: 70ms;
    --i: 0;

    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
    --ease-emphasis: cubic-bezier(0.66, 0, 0.06, 1);

    --z-base: 0;
    --z-sticky: 100;
    --z-header: 200;
    --z-widget: 300;
    --z-modal: 400;
  }

  @media (min-width: 48rem) {
    :root {
      --gutter: var(--sp-8);
    }
  }

  @media (min-width: 64rem) {
    :root {
      --gutter: var(--sp-10);
      --header-h: 4.5rem;
    }
  }

  @media (min-width: 90rem) {
    :root {
      --gutter: var(--sp-14);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-3: 1ms;
      --dur-4: 1ms;
      --dur-5: 1ms;
      --stagger: 0ms;
    }
  }
}