/* HomeAnvil · tokens.css — Tempered Steel (warm)
 * With fonts.css and themes/*.css, the ONLY files allowed to contain raw color, font, shadow and z-index values.
 * Every other stylesheet uses var(--…) from here. Rules: docs/UI_SYSTEM.md; the check is scripts/lint-ui.mjs.
 * The default type is the system stack (proposed ADR 0052 rule 4: system fonts on the landing page);
 * a page that may load Archivo links fonts.css after this file and gets the same token, swapped.
 * Theme: Tempered Steel, warmed toward Angi · cream neutrals · pill buttons (no glow) · dark hero card · Archivo */


:root{
  /* Surfaces — warm cream neutrals */
  --color-bg:#FBF6F1;
  --color-surface:#FFFFFF;
  --color-surface-2:#F4EDE5;
  --color-border:#E8E0D6;
  --color-border-strong:#948A7F;       /* inputs: 3.4:1 on white */

  /* Text — warm navy ink */
  --color-text:#1B2434;
  --color-text-muted:#6B645C;          /* 5.4:1 on bg */
  --color-text-inverse:#FFFFFF;
  --color-scrim:rgb(27 36 52 / .55);   /* modal backdrop */
  --color-hero-scrim:rgb(20 26 38 / .70);  /* dark see-through card over hero photos */
  --color-on-scrim-muted:#E3E0DA;      /* secondary text on the hero scrim */

  /* Ink — dark zones (admin top bar, preview bar) */
  --color-ink:#1B2434;
  --color-ink-raised:#2A3448;
  --color-ink-muted:#A8B0BE;           /* 7.1:1 on ink */

  /* Action — one per screen: warm tempered orange */
  --color-action:#D0431F;
  --color-action-hover:#B83A18;
  --color-action-edge:#B23916;
  --color-action-fg:#FFFFFF;           /* 4.7:1 on action */
  --color-brand-text:#B53A12;          /* orange text/links on light: 5.5:1 */
  --color-brand-soft:#FDEDE6;          /* selected tile, focus halo */
  --color-focus:#D0431F;

  /* Structure — steel navy (logo, icons, avatars) */
  --color-structure:#2E4260;
  --color-structure-fg:#FFFFFF;

  /* Status (danger kept crimson so it never reads as the orange action) */
  --color-success:#1F8A4C; --color-success-soft:#E4F1EA; --color-success-text:#1B7842;
  --color-warning:#C98A00; --color-warning-soft:#FBF3DC; --color-warning-text:#7A5A00;
  --color-danger:#B51A4E;  --color-danger-soft:#F8E3EA;  --color-danger-text:#A3174A;
  --color-info:#2F6FDB;    --color-info-soft:#E6EEFB;    --color-info-text:#2A64C5;

  /* Type */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;  /* fonts.css overrides this with Archivo where a page may load it */
  --font-display:var(--font-sans);    /* headings; themes may swap it */
  --font-mono:ui-monospace,Menlo,Consolas,monospace;   /* token names and values in the style guide */
  --weight-regular:400; --weight-quote:500; --weight-medium:600; --weight-bold:700; --weight-display:800;
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:clamp(1rem,.951rem + .217vw,1.125rem);
  --text-lg:clamp(1.2rem,1.13rem + .3vw,1.375rem);
  --text-xl:clamp(1.44rem,1.33rem + .48vw,1.75rem);
  --text-2xl:clamp(1.73rem,1.56rem + .75vw,2.19rem);
  --text-3xl:clamp(2.07rem,1.81rem + 1.15vw,2.73rem);
  --text-4xl:clamp(2.49rem,2.09rem + 1.75vw,3.42rem);
  --input-size:1rem;                   /* never below 16px: iOS zoom */
  --leading-tight:1.1; --leading-snug:1.35; --leading-body:1.55;
  --tracking-display:-.02em;

  /* Space (4px base) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.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-section:clamp(3rem,2rem + 4vw,6rem);
  --gutter:clamp(1rem,.5rem + 3vw,4.5rem);
  --content-max:96rem; --prose-max:40rem; --funnel-max:40rem;

  /* Shape */
  --radius-sm:8px;      /* badges, small chips */
  --radius-control:12px;/* buttons, inputs, answer tiles */
  --radius-card:16px;   /* cards, panels, photos */
  --radius-full:999px;
  --radius-button:var(--radius-full);  /* all buttons are pills */
  --border-w:1.5px;

  /* Depth — borders first; shadows only for things that float */
  --shadow-sm:0 1px 2px rgb(28 26 23 / .06);
  --shadow-md:0 6px 16px rgb(28 26 23 / .10);
  --shadow-lg:0 24px 48px -16px rgb(28 26 23 / .28);
  --ring:0 0 0 3px var(--color-brand-soft),0 0 0 5px var(--color-focus);

  /* Scroll-edge fades for carousels (mask only — shows there is more to swipe) */
  --fade-w:2.5rem;
  --mask-fade-r:linear-gradient(90deg,#000 calc(100% - var(--fade-w)),transparent);
  --mask-fade-l:linear-gradient(90deg,transparent,#000 var(--fade-w));
  --mask-fade-both:linear-gradient(90deg,transparent,#000 var(--fade-w),#000 calc(100% - var(--fade-w)),transparent);

  /* Controls */
  --tap-min:48px; --control-h:56px; --control-h-sm:40px; --tile-min-h:56px; --progress-h:6px;

  /* Motion */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.6,0,.3,1);

  /* Layers */
  --z-raised:1; --z-sticky:10; --z-header:50; --z-overlay:100; --z-toast:200;
}
/* Breakpoints (literal — custom properties can't be used in media queries): 48rem, 64rem */
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}