/*
  EzGathr design tokens — the only stylesheet where literal colors, sizes, radii, shadows,
  durations, and z-indexes may appear. Every other file reads them through var(), and
  StylesheetLintTests fails the build otherwise. TokenContrastTests checks the semantic
  color pairs against WCAG 2.2 AA.

  Plus Jakarta Sans © The Plus Jakarta Sans Project Authors, SIL Open Font License 1.1
  (css/fonts/OFL.txt). Source and SHA-256: docs/implementation/ledger.md.

  Principles and usage: docs/design/principles.md, docs/design/components.md.
*/

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

    /* ---- Primitive ramps (never referenced outside this file) ---- */
    --neutral-0: #ffffff;
    --neutral-25: #fcfcfd;
    --neutral-50: #f7f7f9;
    --neutral-100: #f0eff3;
    --neutral-200: #e6e4eb;
    --neutral-300: #d4d1db;
    --neutral-400: #a9a5b3;
    --neutral-500: #8e8a99;
    --neutral-600: #6e6a7a;
    --neutral-700: #57535f;
    --neutral-800: #3a3742;
    --neutral-900: #18161f;
    --neutral-950: #0e0c14;

    --indigo-50: #f3f1fe;
    --indigo-100: #e7e3fd;
    --indigo-200: #d0c8fb;
    --indigo-300: #afa2f7;
    --indigo-400: #8b79f3;
    --indigo-600: #5b45ef;
    --indigo-700: #4a35d6;
    --indigo-800: #3b29ae;
    --indigo-900: #2c1f80;

    --coral-50: #fff3ee;
    --coral-100: #ffe3d6;
    --coral-500: #ff7a45;
    --coral-700: #c2410c;
    --coral-800: #9a3412;

    --teal-50: #e9f8f5;
    --teal-100: #c9eee7;
    --teal-500: #0f9d8e;
    --teal-700: #0b7166;
    --teal-800: #0a5f56;

    --amber-50: #fff7e8;
    --amber-100: #feebc8;
    --amber-500: #f59e0b;
    --amber-800: #93400e;

    --red-50: #fef1f2;
    --red-100: #fde0e3;
    --red-700: #c0163a;

    /* ---- Semantic color roles ---- */
    /* Text: every text role is at least 4.5:1 on --color-surface and --color-surface-subtle. */
    --color-text: var(--neutral-900);
    --color-text-secondary: var(--neutral-700);
    --color-text-tertiary: var(--neutral-600);
    --color-text-disabled: var(--neutral-400);
    --color-text-on-accent: var(--neutral-0);
    --color-text-on-inverse: var(--neutral-0);
    --color-text-link: var(--indigo-600);
    --color-text-link-hover: var(--indigo-800);

    /* Surfaces */
    --color-canvas: var(--neutral-0);
    --color-surface: var(--neutral-0);
    --color-surface-subtle: var(--neutral-50);
    --color-surface-muted: var(--neutral-100);
    --color-surface-hover: var(--neutral-100);
    --color-surface-pressed: var(--neutral-200);
    --color-surface-inverse: var(--neutral-900);
    --color-surface-inverse-hover: var(--neutral-800);
    --color-overlay: rgb(14 12 20 / 0.48);
    /* The sticky header over scrolling content: opaque enough that its links keep 4.5:1 over black. */
    --color-surface-frosted: rgb(255 255 255 / 0.86);

    /* Borders: --color-border-control is 3.36:1 on white (WCAG 1.4.11). */
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-border-control: var(--neutral-500);
    --color-border-control-hover: var(--neutral-700);

    /* Accent: action, selection, focus — nothing decorative. 5.93:1 on white. */
    --color-accent: var(--indigo-600);
    --color-accent-hover: var(--indigo-700);
    --color-accent-pressed: var(--indigo-800);
    --color-accent-subtle: var(--indigo-50);
    --color-accent-subtle-hover: var(--indigo-100);
    --color-accent-subtle-border: var(--indigo-300);
    --color-accent-text: var(--indigo-800);
    --color-focus: var(--indigo-600);
    --color-selection: var(--indigo-100);

    /* Status */
    --color-success: var(--teal-700);
    --color-success-subtle: var(--teal-50);
    --color-success-border: var(--teal-100);
    --color-warning: var(--amber-800);
    --color-warning-icon: var(--amber-500);
    --color-warning-subtle: var(--amber-50);
    --color-warning-border: var(--amber-100);
    --color-danger: var(--red-700);
    --color-danger-subtle: var(--red-50);
    --color-danger-border: var(--red-100);
    --color-info: var(--indigo-800);
    --color-info-subtle: var(--indigo-50);
    --color-info-border: var(--indigo-100);

    /* Brand (mark, illustration, tiny highlights only — never text on white) */
    --color-brand-indigo: var(--indigo-600);
    --color-brand-coral: var(--coral-500);
    --color-brand-coral-subtle: var(--coral-50);
    --color-brand-teal: var(--teal-500);
    --color-brand-lilac: var(--indigo-200);
    --color-brand-night: var(--indigo-900);
    /*
      The home hero's glow: brand hues at a whisper behind its text. Secondary text measures about
      5.9:1 at the indigo wash's peak, and TokenContrastTests holds it to 4.5:1 even with all three
      washes stacked at full strength.
    */
    --color-brand-glow-indigo: rgb(91 69 239 / 0.16);
    --color-brand-glow-coral: rgb(255 122 69 / 0.14);
    --color-brand-glow-teal: rgb(15 157 142 / 0.12);

    /*
      Avatar tones: initials on a tinted disc. Each pair is checked at 4.5:1 in
      TokenContrastTests because the initials are text, not decoration — which is why the
      foregrounds are the 700/800 steps rather than the 500 brand colors.
    */
    --color-avatar-indigo-surface: var(--indigo-100);
    --color-avatar-indigo-text: var(--indigo-800);
    --color-avatar-coral-surface: var(--coral-100);
    --color-avatar-coral-text: var(--coral-800);
    --color-avatar-teal-surface: var(--teal-100);
    --color-avatar-teal-text: var(--teal-800);
    --color-avatar-amber-surface: var(--amber-100);
    --color-avatar-amber-text: var(--amber-800);
    --color-avatar-neutral-surface: var(--neutral-200);
    --color-avatar-neutral-text: var(--neutral-800);

    /* ---- Typography ---- */
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-title: clamp(1.875rem, 1.6rem + 1.2vw, 2.25rem);
    --text-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);

    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

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

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;
    --underline-offset: 0.18em;
    --text-relative-sm: 0.875em;
    --text-relative-xs: 0.75em;
    --sub-offset: -0.25em;
    --sup-offset: -0.5em;

    /* ---- Space (4px grid) ---- */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --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;

    /* ---- Shape ---- */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;
    --radius-round: 50%;

    --border-width: 1px;
    --border-width-strong: 2px;
    --focus-width: 2px;
    --focus-offset: 2px;
    /* How far a focus ring extends past its control: what a clipping container must leave. */
    --focus-reach: calc(var(--focus-width) + var(--focus-offset));

    /* ---- Elevation ---- */
    --shadow-none: none;
    --walkthrough-shadow: 0 0 0 100vmax var(--color-overlay);
    --walkthrough-width: 25rem;
    --walkthrough-height: 55dvh;
    --shadow-sm: 0 1px 2px rgb(16 14 24 / 0.06), 0 1px 1px rgb(16 14 24 / 0.04);
    --shadow-md: 0 1px 2px rgb(16 14 24 / 0.06), 0 4px 14px rgb(16 14 24 / 0.08);
    --shadow-lg: 0 2px 6px rgb(16 14 24 / 0.08), 0 12px 32px rgb(16 14 24 / 0.12);
    --shadow-xl: 0 8px 20px rgb(16 14 24 / 0.1), 0 28px 64px rgb(16 14 24 / 0.2);
    --shadow-inset-raised: 0 1px 2px rgb(16 14 24 / 0.1), 0 0 0 1px rgb(16 14 24 / 0.04);
    --ring-accent: inset 0 0 0 1px var(--color-accent);
    --ring-accent-strong: inset 0 0 0 2px var(--color-accent);
    --ring-danger: inset 0 0 0 1px var(--color-danger);
    --ring-control: inset 0 0 0 1px var(--color-border-control);
    --ring-control-hover: inset 0 0 0 1px var(--color-border-control-hover);
    --backdrop-frosted: saturate(1.8) blur(12px);

    /* ---- Sizing ---- */
    --control-sm: 2rem;
    --control-md: 2.75rem;
    --control-lg: 3.5rem;
    --control-chip: 2.25rem;
    --control-segment: 2.25rem;
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.5rem;
    --checkbox-size: 1.25rem;
    --avatar-sm: 1.75rem;
    --avatar-md: 2.5rem;
    --avatar-lg: 4.5rem;
    --target-min: 1.5rem;
    --target-touch: 2.75rem;
    --icon-stroke-width: 1.75;
    --switch-width: 2.75rem;
    --switch-height: 1.5rem;
    --switch-thumb: 1.125rem;
    --switch-travel: 1.25rem;
    --stepper-value-width: 3ch;
    --textarea-min-height: 7.5rem;
    --menu-min-width: 14rem;
    --menu-max-height: 22rem;
    --sheet-width: 44rem;
    --sheet-max-height: 90dvh;
    --tile-min-width: 9.5rem;
    --empty-icon-size: 3rem;
    --badge-dot: 0.375rem;

    /* ---- Motion ---- */
    --duration-instant: 0.01ms;
    --duration-fast: 100ms;
    --duration-normal: 180ms;
    --duration-slow: 280ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);
    --ease-linear: linear;
    --duration-spin: 700ms;
    --motion-press-scale: 0.97;
    --motion-check-scale: 0.7;
    --motion-enter-distance: 0.5rem;
    --motion-hover-lift: -0.125rem;

    /* ---- Layering ---- */
    --z-base: 0;
    --z-raised: 1;
    --z-card-action: 2;
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-behind: -1;

    /* ---- Layout ---- */
    --container-page: 75rem;
    --container-content: 60rem;
    --container-form: 36rem;
    --container-prose: 42rem;
    --container-narrow: 28rem;
    --listing-photo-min: 21rem;
    --listing-photo-tile: 15rem;
    --listing-photo-preview: 40rem;
    --gutter: 1rem;
    --header-height: 4rem;
    --app-nav-width: 24rem;
    --app-nav-available-height: calc(100dvh - var(--header-height));
    --measure: 65ch;

    /* ---- Editorial reader ---- */
    --reader-page: 75rem;
    --reader-measure: 44rem;
    --reader-rail: 15rem;
    --reader-cell: 8rem;
    --reader-toc-height: calc(100dvh - 9rem);
    --reader-anchor-offset: 7rem;
    --reader-sans: var(--font-sans);
    --reader-title: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
    --reader-heading: 1.625rem;
    --reader-lead: 1.25rem;
    --reader-body: 1.1875rem;
    --reader-table: 1rem;
    --reader-small: 0.875rem;
    --reader-bold: 600;
    --reader-tracking: -0.025em;
    --reader-tight: 1.2;
    --reader-normal: 1.5;
    --reader-relaxed: 1.7;
    --reader-zero: 0;
    --reader-space-xs: 0.25rem;
    --reader-space-sm: 0.5rem;
    --reader-space-md: 1rem;
    --reader-space-lg: 2rem;
    --reader-space-xl: 3rem;
    --reader-radius: 1rem;
    --reader-radius-sm: 0.5rem;
    --reader-text: #27232c;
    --reader-muted: #57535f;
    --reader-surface: #f7f7f9;
    --reader-link: #4a35d6;
    --reader-border: 1px solid #e6e4eb;
    --reader-accent-border: 3px solid #4a35d6;
    --reader-underline: 0.18em;

    /* ---- Breakpoints (documentation only: CSS cannot read variables in @media) ----
       sm 40em (640px) · md 48em (768px) · lg 64em (1024px) · xl 80em (1280px)
       StylesheetLintTests allows exactly these widths, in range syntax: (width >= 48em). site.js reads 80em (the header nav). */
  }

  @media (width >= 48em) {
    :root {
      --gutter: 1.5rem;
    }
  }

  @media (width >= 80em) {
    :root {
      --gutter: 2.5rem;
    }
  }

  /* Increased-contrast preference: secondary text and hairlines step one notch darker. The
     site stays light (color-scheme: light); there is no dark theme. */
  @media (prefers-contrast: more) {
    :root {
      --color-text-secondary: var(--neutral-900);
      --color-text-tertiary: var(--neutral-800);
      --color-border: var(--neutral-500);
      --color-border-strong: var(--neutral-600);
      --color-border-control: var(--neutral-700);
    }
  }


}