/* Localist AZ design tokens, version 0.2.0
   THE source of truth for every color, size, typeface and timing in the system.
   Hand-authored. tokens/build.mjs parses this file (each token's trailing comment becomes its
   description; @contrast directives become build-time assertions) and generates tokens.json,
   styleguide.data.js and DESIGN.md's token tables. Nothing else may contain a hex, rgb(), or raw
   px value for color, type, spacing or radius.

   Naming: --lz-<hue>            palette primitive (never used directly in component CSS)
           --lz-color-<role>     semantic color role (what components consume)
           --lz-text-*, --lz-font-*, --lz-weight-*, --lz-leading-*, --lz-stretch-*   type
           --lz-space-*, --lz-radius-*, --lz-control-*, --lz-wrap, --lz-gutter       layout
           --lz-shadow-*, --lz-ease, --lz-duration-*, --lz-grain-*                    surface and motion
           --lz-<component>-*    component token (rare; only where a component needs its own knob)
   Surfaces: [data-surface="navy"] and [data-surface="red"] re-value the semantic roles so one set of
   components works on paper, on the navy stamp surface and on the red band. */

:root {
  /* --- Palette: brand hues --- */
  --lz-navy: #0f3146;        /* Brand navy. Ink on paper; the stamp surface; the footer. */
  --lz-navy-deep: #0a2434;   /* Navy pressed one step darker. Hover fill for navy actions. */
  --lz-teal: #068492;        /* Brand teal. Icons, large display accents, underlines. Not for body-size text on paper (3.9:1). */
  --lz-teal-deep: #0b6570;   /* Teal as ink. Text links, eyebrows and teal text at body sizes (5.9:1 on paper). */
  --lz-sky: #7ecfd2;         /* Light teal. Decorative plates; secondary text on navy (7.6:1). Never text on paper. */
  --lz-red: #ed2125;         /* Brand red. Wordmark, seals, AZ tag, icons, decorative plates. Not for body-size text or filled buttons with white labels (4.3:1). */
  --lz-red-press: #d11b1f;   /* Red as a pressed surface. Filled buttons and the red band, so white labels reach 5.4:1. */
  --lz-red-deep: #c4181c;    /* Red as ink. Red text at body sizes (5.3:1 on paper); hover fill for red actions. */
  --lz-sun: #faa21f;         /* Brand sun. Plates, illustration and warning tints. Never text. */
  --lz-cactus: #39b54a;      /* Brand green. Reserved for illustration and success tints. Never text. */
  --lz-cactus-deep: #256c30; /* Green as ink. Success text (5.6:1 on paper). */

  /* --- Palette: paper and neutrals --- */
  --lz-paper: #f7f5ec;       /* Warm paper. The page ground, sampled from the mockup: light enough to read as almost white, warm enough to stay paper (D-09). */
  --lz-cream: #fdfcf8;       /* Cream. Cards and raised light surfaces: one clear step lighter than the page, one step short of a field (D-09). */
  --lz-white: #ffffff;       /* Pure white. Text fields only, so they read as openings in the paper. */
  --lz-charcoal: #262421;    /* Near-black. LOCALIST in the wordmark only. */
  --lz-slate: #5b6b73;       /* Muted ink. Secondary text (4.8:1 on paper). */
  --lz-line: #e1d9c8;        /* Hairline on paper: dividers, card edges. Decorative, not a control boundary. */
  --lz-line-strong: #78878f; /* Control boundary: input borders and checkbox edges (3.2:1 on paper). */
  --lz-shade: #d9e1e2;       /* Photo window placeholder before an image loads. */

  /* --- Color roles: surfaces --- */
  --lz-color-surface-page: var(--lz-paper);   /* The page. Always paper, never white. */
  --lz-color-surface-card: var(--lz-cream);   /* Cards, panels and menus resting on the page. */
  --lz-color-surface-field: var(--lz-white);  /* Text inputs, textareas, selects. */
  --lz-color-surface-navy: var(--lz-navy);    /* Navy surfaces: the search panel stamp, impact panels and the flat footer. Mark the element data-surface="navy". */
  --lz-color-surface-red: var(--lz-red-press);/* The red band. Mark the element data-surface="red". */
  --lz-color-surface-tint: #eaf3f4;           /* Teal tint for selected chips, hovered menu rows and info notes (navy 11.9:1 on it). */

  /* --- Color roles: ink --- */
  --lz-color-ink: var(--lz-navy);              /* Headings and body text. @contrast surface-page 4.5 surface-card 4.5 surface-field 4.5 */
  --lz-color-ink-muted: var(--lz-slate);       /* Secondary text: meta lines, captions, hints. @contrast surface-page 4.5 surface-card 4.5 */
  --lz-color-ink-teal: var(--lz-teal-deep);    /* Teal text: eyebrows, links, live status. @contrast surface-page 4.5 surface-card 4.5 */
  --lz-color-ink-red: var(--lz-red-deep);      /* Red text: the Certified Localist label, errors, closed notices. @contrast surface-page 4.5 surface-card 4.5 */
  --lz-color-ink-on-dark: var(--lz-cream);     /* Text on navy or red surfaces. @contrast surface-navy 4.5 surface-red 4.5 */
  --lz-color-ink-on-dark-muted: var(--lz-sky); /* Secondary text on navy only. @contrast surface-navy 4.5 */
  --lz-color-link: var(--lz-teal-deep);        /* Link color on light surfaces; always underlined inside running text. @contrast surface-page 4.5 surface-card 4.5 */
  --lz-color-link-hover: var(--lz-navy);       /* Link hover on light surfaces. */

  /* --- Color roles: lines, focus, actions --- */
  --lz-color-line: var(--lz-line);              /* Dividers and card hairlines on light surfaces. */
  --lz-color-border-input: var(--lz-line-strong);/* Field and checkbox boundary. @contrast surface-page 3 surface-card 3 */
  --lz-color-focus: var(--lz-navy);             /* The one focus ring color on light surfaces. @contrast surface-page 3 surface-card 3 */
  --lz-color-action: var(--lz-red-press);       /* Primary action fill. One per view. */
  --lz-color-action-hover: var(--lz-red-deep);  /* Primary action fill on hover. */
  --lz-color-action-fg: var(--lz-white);        /* Label on the primary action. @contrast action 4.5 */
  --lz-color-secondary: var(--lz-navy);         /* Secondary (navy) action fill. */
  --lz-color-secondary-hover: var(--lz-navy-deep);/* Secondary action fill on hover. */
  --lz-color-secondary-fg: var(--lz-cream);     /* Label on the secondary action and the mark in a checked box. @contrast secondary 4.5 */
  --lz-color-brand: var(--lz-red);              /* Brand marks: wordmark symbol, seal, AZ tag, decorative icons. Not text. */
  --lz-color-accent: var(--lz-teal);            /* Display accents: the teal headline line, icon fills, underline rules. Large text and non-text only. @contrast surface-page 3 */
  --lz-color-badge: var(--lz-teal-deep);        /* Count badge fill. */
  --lz-color-badge-fg: var(--lz-white);         /* Digits on the count badge. @contrast badge 4.5 */

  /* --- Color roles: status --- */
  --lz-color-success: var(--lz-cactus-deep);    /* Success text and icons. @contrast surface-page 4.5 */
  --lz-color-success-tint: #e3f1e5;             /* Success background. */
  --lz-color-warning: #8f5200;                  /* Warning text and icons (5.4:1 on paper). @contrast surface-page 4.5 */
  --lz-color-warning-tint: #fdeccb;             /* Warning background. */
  --lz-color-danger: var(--lz-red-deep);        /* Error text, error borders and icons. @contrast surface-page 4.5 surface-field 4.5 */
  --lz-color-danger-tint: #fbe3e3;              /* Error background. */
  --lz-color-info: var(--lz-teal-deep);         /* Informational text and icons. @contrast surface-page 4.5 */
  --lz-color-info-tint: var(--lz-color-surface-tint); /* Informational background. */

  /* --- Typography: families and weights --- */
  --lz-font-display: "Anek Telugu Variable", "Anek Telugu", "Anek Latin", "Arial Narrow", "Helvetica Neue", sans-serif; /* Display face for headlines, card titles and the wordmark. Always weight 800, condensed 88 to 98 percent. The Variable name is the self-hosted fontsource-variable build the app installs; the plain name is the Google Fonts build the guide loads. */
  --lz-font-text: "Figtree Variable", "Figtree", "Avenir Next", "Helvetica Neue", system-ui, sans-serif; /* Text face for everything that is read or operated: body, labels, controls, captions. The Variable name is the self-hosted build. */
  --lz-font-letter: "Courier New", Courier, monospace; /* Typewriter face for the original open letter. Uses local fonts without another download. */
  --lz-weight-display: 800; /* The only display weight. */
  --lz-weight-bold: 700;    /* Buttons, eyebrows, strong labels, small headings. */
  --lz-weight-medium: 500;  /* Navigation, meta lines, lead paragraphs, field text. */
  --lz-weight-regular: 400; /* Body copy. */
  --lz-stretch-hero: 88%;   /* Width of the hero headline. Tighter than everything else. */
  --lz-stretch-page: 92%;   /* Width of page headlines and the wordmark. */
  --lz-stretch-section: 94%;/* Width of section headings. */
  --lz-stretch-panel: 96%;  /* Width of panel headings and the AZ tag. */
  --lz-stretch-title: 98%;  /* Width of card titles and small display heads. */

  /* --- Typography: display sizes (fluid, capped) --- */
  --lz-text-hero: clamp(48px, 6.4vw, 88px);    /* Hero headline, home only. Two uppercase lines, second line teal. */
  --lz-text-campaign: clamp(40px, 13vw, 160px); /* Brief Why Local campaign declaration. Page composition only, never general section headings. */
  --lz-text-page: clamp(34px, 4vw, 52px);      /* Page headline (h1) on every page except home. Sentence case. */
  --lz-text-section: clamp(28px, 2.6vw, 36px); /* Section heading (h2). */
  --lz-text-panel: clamp(24px, 2.2vw, 30px);   /* Heading inside a panel, band or aside (h2 or h3). */
  --lz-text-title: clamp(20px, 1.5vw, 24px);   /* Card title and h3. */
  --lz-text-title-sm: 19px;                    /* Compact card title and h4. */
  --lz-leading-hero: 0.92;    /* Hero line height. */
  --lz-leading-page: 0.98;    /* Page headline line height. */
  --lz-leading-section: 1.02; /* Section heading line height. */
  --lz-leading-title: 1.1;    /* Card title line height. */

  /* --- Typography: text sizes --- */
  --lz-text-lead: clamp(17px, 1.3vw, 19px); /* Lead paragraph under a headline. Weight medium. */
  --lz-text-body: 16px;   /* Body copy and field text. Never smaller for running text. */
  --lz-text-ui: 15px;     /* Card descriptions, secondary controls, footer links. */
  --lz-text-sm: 14px;     /* Navigation, chips, meta lines, option pills. */
  --lz-text-caption: 13px;/* Captions, notes, breadcrumbs, table cells. */
  --lz-text-fine: 12px;   /* Fine print and small labels. Minimum size anywhere. */
  --lz-text-eyebrow: 11px;/* Eyebrow labels only, uppercase with tracking. */
  --lz-text-field-lg: 17px; /* Text inside the large search field. */
  --lz-leading-body: 1.55;  /* Body line height. */
  --lz-leading-tight: 1.35; /* Line height for short UI text and small headings. */
  --lz-leading-lead: 1.4;   /* Lead paragraph line height. */
  --lz-tracking-eyebrow: 0.13em; /* Eyebrow letter spacing. */
  --lz-tracking-display: -0.004em; /* Hero letter spacing. Other display sizes use -0.01em to 0. */

  /* --- Spacing: 4px scale --- */
  --lz-space-05: 2px;  /* Optical nudges only: icon baseline shifts, hairline gaps. */
  --lz-space-1: 4px;   /* Icon gaps, small inner padding. */
  --lz-space-15: 6px;  /* Half step: gaps between an icon and a short label, tight inner padding. */
  --lz-space-2: 8px;   /* Inside chips; between icon and label. */
  --lz-space-25: 10px; /* Half step: compact card padding, pill sides. */
  --lz-space-3: 12px;  /* Inside compact cards; between meta rows. */
  --lz-space-4: 16px;  /* Default gap between related elements. */
  --lz-space-5: 20px;  /* Card grid gap; panel form gap. */
  --lz-space-6: 24px;  /* Between groups inside a section. */
  --lz-space-7: 32px;  /* Panel padding at desktop. */
  --lz-space-8: 40px;  /* Band padding at desktop. */
  --lz-space-9: 48px;  /* Small section gap. */
  --lz-space-10: 64px; /* Large section gap on phones. */
  --lz-space-11: 72px; /* Section gap and gutter at desktop. */
  --lz-space-12: 96px; /* Editorial page top padding. */

  /* --- Layout --- */
  --lz-wrap: 1240px;                              /* Content width including gutters. */
  --lz-gutter: clamp(20px, 5.5vw, 72px);          /* Side gutter. Panels and bands sit inside it at every width. */
  --lz-section-gap: clamp(44px, 5vw, 72px);       /* Vertical rhythm between page sections. */
  --lz-measure: 46ch;                             /* Maximum line length for running text: about 65 characters. The ch unit is the width of "0", which in Figtree is half again the average character, so 65ch would set 93 characters. */
  --lz-breakpoint-wide: 1080px;                   /* Below this, category tiles shrink. Documentation only: a media query cannot read a custom property, so write 1080px with this name in a comment beside it. */
  --lz-breakpoint-desktop: 960px;                 /* Below this, the hero stacks and grids go to one or two columns. Documentation only; write 960px in the media query with this name beside it. */
  --lz-breakpoint-tablet: 860px;                  /* Below this, navigation collapses to the Menu button. Documentation only; write 860px in the media query with this name beside it. */
  --lz-breakpoint-phone: 640px;                   /* Below this, controls stack and display sizes use their phone clamps. Documentation only; write 640px in the media query with this name beside it. */

  /* --- Controls --- */
  --lz-control-xs: 36px;   /* Chips and the compact pills under the search row. */
  --lz-control-sm: 40px;   /* Option pills, icon buttons, small buttons. */
  --lz-control-md: 48px;   /* Buttons, inputs, selects. The default. */
  --lz-control-lg: 52px;   /* The large search field and its button only. */
  --lz-target-min: 24px;   /* Smallest allowed hit area for any control (WCAG 2.5.8). */
  --lz-target-touch: 44px; /* Hit area for primary actions on touch. */
  --lz-control-pad-x: 22px;/* Horizontal padding inside buttons. */
  --lz-field-pad-x: 14px;  /* Horizontal padding inside fields. */

  /* --- Radius --- */
  --lz-radius-sm: 4px;    /* Tags, small labels, focus ring corners. */
  --lz-radius-md: 8px;    /* Buttons, inputs, selects, option pills, menu rows. */
  --lz-radius-lg: 12px;   /* Cards, menus, the search panel. */
  --lz-radius-xl: 14px;   /* Bands and large panels. */
  --lz-radius-pill: 999px;/* City pills, chips and count badges. */

  /* --- Elevation --- */
  --lz-shadow-card: 0 1px 0 rgb(15 49 70 / 0.06), 0 14px 32px -20px rgb(15 49 70 / 0.4);      /* Card at rest on paper. */
  --lz-shadow-card-hover: 0 1px 0 rgb(15 49 70 / 0.06), 0 26px 48px -22px rgb(15 49 70 / 0.5);/* Card lifted on hover. */
  --lz-shadow-field: 0 14px 34px -10px rgb(0 0 0 / 0.35);                                     /* The white search row lifted off the navy panel. */
  --lz-shadow-action: 0 6px 18px -8px rgb(237 33 37 / 0.7);                                   /* Red glow under the primary action. */
  --lz-shadow-menu: 0 24px 48px -18px rgb(15 49 70 / 0.45);                                   /* Menus, popovers and the disclosure panel. */
  --lz-shadow-toast: 0 14px 34px -12px rgb(0 0 0 / 0.5);                                      /* Toast. */
  --lz-shadow-disc: 0 2px 10px rgb(15 49 70 / 0.2);                                          /* A small backed control floating over a photo. */

  /* --- Motion --- */
  --lz-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* The one easing curve. Fast out, soft landing. */
  --lz-duration-fast: 160ms;   /* Color and border changes. */
  --lz-duration-base: 250ms;   /* Lifts, nudges, toasts. */
  --lz-duration-slow: 600ms;   /* Image zoom on hover, load sequence. */
  --lz-duration-settle: 900ms; /* Plate settle on load. */

  /* --- Texture --- */
  --lz-grain-navy: 0.07;   /* Grain opacity on the navy stamp surface. The starter's 0.48 reads as static. */
  --lz-grain-red: 0.10;    /* Grain opacity on the red band. */
  --lz-grain-count: 900;   /* Specks per 192px grain tile. */
  --lz-grain-rim: 6px;     /* Denser ink rim around a stamp surface. */
  --lz-texture-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Paper noise, tiled at 240px on the page ground. */

  /* --- Brand --- */
  --lz-logo-size: 25px;  /* LOCALIST font size in the wordmark; every part of the lockup keys off it. 22px on phones. */
  --lz-seal-size: 100px; /* Certified Localist seal on a lead card. 84px on phones. Never below 84px. */
}

/* A layer that floats off a dark surface lands on paper: a menu opening past the panel edge,
   a disclosure panel below it. It restores the light roles so one component reads correctly in
   both places. Mark such a layer with data-surface="paper"; the two that always float carry it
   by class. Every role the navy and red blocks re-value is restored here, and the build checks that. */
[data-surface="paper"], .lz-menu, .lz-disclosure-panel {
  --lz-color-ink: var(--lz-navy);
  --lz-color-ink-muted: var(--lz-slate);
  --lz-color-ink-teal: var(--lz-teal-deep);
  --lz-color-link: var(--lz-teal-deep);
  --lz-color-link-hover: var(--lz-navy);
  --lz-color-line: var(--lz-line);
  --lz-color-focus: var(--lz-navy);
  --lz-color-surface-card: var(--lz-cream);
  --lz-color-surface-tint: #eaf3f4;
  --lz-color-accent: var(--lz-teal);
  --lz-color-secondary: var(--lz-navy);
  --lz-color-secondary-hover: var(--lz-navy-deep);
  --lz-color-secondary-fg: var(--lz-cream);
  --lz-color-badge: var(--lz-teal-deep);
  --lz-color-badge-fg: var(--lz-white);
  --lz-color-info: var(--lz-teal-deep);
  --lz-color-info-tint: var(--lz-color-surface-tint);
  --lz-color-success: var(--lz-cactus-deep);
  --lz-color-success-tint: #e3f1e5;
  --lz-color-warning: #8f5200;
  --lz-color-warning-tint: #fdeccb;
  --lz-color-danger: var(--lz-red-deep);
  --lz-color-danger-tint: #fbe3e3;
  --lz-color-border-input: var(--lz-line-strong);
}

/* Navy surface: the search panel stamp, impact panels and the flat footer. Components inside read the same roles and just work.
   Status tones go to the bright brand hues for icons and borders (3:1 or better); error text on navy stays cream beside the alert icon. */
[data-surface="navy"] {
  --lz-color-ink: var(--lz-cream);             /* @contrast surface-navy 4.5 */
  --lz-color-ink-muted: var(--lz-sky);         /* @contrast surface-navy 4.5 */
  --lz-color-ink-teal: var(--lz-sky);          /* @contrast surface-navy 4.5 */
  --lz-color-link: var(--lz-sky);              /* @contrast surface-navy 4.5 */
  --lz-color-link-hover: var(--lz-white);
  --lz-color-line: rgb(255 255 255 / 0.18);
  --lz-color-focus: var(--lz-cream);           /* @contrast surface-navy 3 */
  --lz-color-surface-card: rgb(255 255 255 / 0.1);
  --lz-color-surface-tint: rgb(255 255 255 / 0.18);
  --lz-color-accent: var(--lz-sky);
  --lz-color-secondary: var(--lz-cream);       /* The secondary button and the checked box go cream. */
  --lz-color-secondary-hover: var(--lz-white);
  --lz-color-secondary-fg: var(--lz-navy);
  --lz-color-badge: var(--lz-cream);           /* Count badge: cream with navy digits. */
  --lz-color-badge-fg: var(--lz-navy);
  --lz-color-info: var(--lz-sky);              /* @contrast surface-navy 3 */
  --lz-color-info-tint: rgb(255 255 255 / 0.12);
  --lz-color-success: var(--lz-cactus);        /* @contrast surface-navy 3 */
  --lz-color-success-tint: rgb(255 255 255 / 0.12);
  --lz-color-warning: var(--lz-sun);           /* @contrast surface-navy 3 */
  --lz-color-warning-tint: rgb(255 255 255 / 0.12);
  --lz-color-danger: var(--lz-red);            /* Borders only on navy (3.1:1); error text and icons go cream through components.css. @contrast surface-navy 3 */
  --lz-color-danger-tint: rgb(255 255 255 / 0.12);
}

/* Red band. Links and secondary text go white; the secondary button re-values to cream and is the only action. Status tones all go cream. */
[data-surface="red"] {
  --lz-color-ink: var(--lz-white);             /* @contrast surface-red 4.5 */
  --lz-color-ink-muted: rgb(255 255 255 / 0.92); /* @contrast surface-red 4.5 */
  --lz-color-ink-teal: var(--lz-white);
  --lz-color-link: var(--lz-white);            /* @contrast surface-red 4.5 */
  --lz-color-link-hover: var(--lz-cream);
  --lz-color-line: rgb(255 255 255 / 0.28);
  --lz-color-focus: var(--lz-cream);           /* @contrast surface-red 3 */
  --lz-color-surface-card: rgb(255 255 255 / 0.12);
  --lz-color-surface-tint: rgb(255 255 255 / 0.12);  /* White text on it stays above 4.5:1. */
  --lz-color-accent: var(--lz-white);
  --lz-color-secondary: var(--lz-cream);       /* The secondary button and the checked box go cream. */
  --lz-color-secondary-hover: var(--lz-white);
  --lz-color-secondary-fg: var(--lz-red-deep);
  --lz-color-badge: var(--lz-cream);           /* Count badge: cream with red-deep digits. */
  --lz-color-badge-fg: var(--lz-red-deep);
  --lz-color-info: var(--lz-cream);            /* @contrast surface-red 4.5 */
  --lz-color-info-tint: rgb(255 255 255 / 0.12);
  --lz-color-success: var(--lz-cream);         /* @contrast surface-red 4.5 */
  --lz-color-success-tint: rgb(255 255 255 / 0.12);
  --lz-color-warning: var(--lz-cream);         /* @contrast surface-red 4.5 */
  --lz-color-warning-tint: rgb(255 255 255 / 0.12);
  --lz-color-danger: var(--lz-cream);          /* @contrast surface-red 4.5 */
  --lz-color-border-input: var(--lz-cream);    /* Outline button edge and box border on the band. @contrast surface-red 3 */
  --lz-color-danger-tint: rgb(255 255 255 / 0.12);
}

/* --lz-breakpoint-phone */
@media (max-width: 640px) {
  :root {
    --lz-text-hero: clamp(40px, 12vw, 52px);
    --lz-text-page: clamp(30px, 8.5vw, 38px);
    --lz-text-section: clamp(28px, 7.6vw, 34px);
    --lz-logo-size: 22px;
    --lz-seal-size: 84px;
  }
}