/* ==========================================================================
   tokens.bundle.css — GENERATED by scripts/build-tokens.js. Do not edit.
   Edit the partials in agent-docs/tokens/ and run: npm run build:tokens
   Per-client brand values: enqueue a copy of _brand.css AFTER this file.
   ========================================================================== */

/* ==========================================================================
   _brand.css — THE ONLY TOKEN FILE EDITED PER CLIENT
   Everything else (opacity steps, tints, shades, semantic roles) derives
   from the values below. Swap these and the whole site re-themes.
   ========================================================================== */

:root {
  /* Brand colors (hex, rgb, hsl or oklch all work) */
  --primary:   #1d3557;
  --secondary: #457b9d;
  --accent:    #e63946;
  --light:     #f1f4f8;
  --dark:      #14213d;

  /* Contrast pairs: the text/icon color that sits ON each brand color.
     Set per client so every pair passes WCAG AA (4.5:1 for body text). */
  --on-primary:   var(--white);
  --on-secondary: var(--white);
  --on-accent:    var(--white);
  --on-light:     var(--dark);
  --on-dark:      var(--white);

  /* Brand typography */
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Brand shape: how rounded this client's UI feels (none | s | m | l | pill) */
  --radius-default: var(--radius-m);
}

/* ==========================================================================
   _colors.css — utility colors + auto-generated brand scales
   Do not edit per client. Brand inputs live in _brand.css.

   Naming grammar
     --{color}            base color
     --{color}-{10-90}         opacity steps in 10s (80 = 80% opaque)
     --{color}-tint-{1-4}      lighter (mixed with white; 4 = lightest)
     --{color}-shade-{1-4}     darker  (mixed with black; 4 = darkest)
   ========================================================================== */

:root {
  /* ---- Utility colors (identical on every site) ---- */
  --transparent: transparent;

  --white:    #ffffff;
  --white-90: rgb(255 255 255 / 0.9);
  --white-80: rgb(255 255 255 / 0.8);
  --white-70: rgb(255 255 255 / 0.7);
  --white-60: rgb(255 255 255 / 0.6);
  --white-50: rgb(255 255 255 / 0.5);
  --white-40: rgb(255 255 255 / 0.4);
  --white-30: rgb(255 255 255 / 0.3);
  --white-20: rgb(255 255 255 / 0.2);
  --white-10: rgb(255 255 255 / 0.1);

  --black:    #000000;
  --black-90: rgb(0 0 0 / 0.9);
  --black-80: rgb(0 0 0 / 0.8);
  --black-70: rgb(0 0 0 / 0.7);
  --black-60: rgb(0 0 0 / 0.6);
  --black-50: rgb(0 0 0 / 0.5);
  --black-40: rgb(0 0 0 / 0.4);
  --black-30: rgb(0 0 0 / 0.3);
  --black-20: rgb(0 0 0 / 0.2);
  --black-10: rgb(0 0 0 / 0.1);

  /* ---- Feedback colors (forms, alerts). Override in _brand.css only if needed ---- */
  --success: #1e7b3c;
  --warning: #b35c00;
  --error:   #c42b1c;
  --info:    #1f5fa8;
  --success-tint-4: color-mix(in oklab, var(--success) 12%, white);
  --warning-tint-4: color-mix(in oklab, var(--warning) 12%, white);
  --error-tint-4:   color-mix(in oklab, var(--error) 12%, white);
  --info-tint-4:    color-mix(in oklab, var(--info) 12%, white);

  /* ---- PRIMARY ---- */
  --primary-90: color-mix(in srgb, var(--primary) 90%, transparent);
  --primary-80: color-mix(in srgb, var(--primary) 80%, transparent);
  --primary-70: color-mix(in srgb, var(--primary) 70%, transparent);
  --primary-60: color-mix(in srgb, var(--primary) 60%, transparent);
  --primary-50: color-mix(in srgb, var(--primary) 50%, transparent);
  --primary-40: color-mix(in srgb, var(--primary) 40%, transparent);
  --primary-30: color-mix(in srgb, var(--primary) 30%, transparent);
  --primary-20: color-mix(in srgb, var(--primary) 20%, transparent);
  --primary-10: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-tint-1: color-mix(in oklab, var(--primary) 80%, white);
  --primary-tint-2: color-mix(in oklab, var(--primary) 60%, white);
  --primary-tint-3: color-mix(in oklab, var(--primary) 35%, white);
  --primary-tint-4: color-mix(in oklab, var(--primary) 12%, white);
  --primary-shade-1: color-mix(in oklab, var(--primary) 85%, black);
  --primary-shade-2: color-mix(in oklab, var(--primary) 70%, black);
  --primary-shade-3: color-mix(in oklab, var(--primary) 50%, black);
  --primary-shade-4: color-mix(in oklab, var(--primary) 30%, black);

  /* ---- SECONDARY ---- */
  --secondary-90: color-mix(in srgb, var(--secondary) 90%, transparent);
  --secondary-80: color-mix(in srgb, var(--secondary) 80%, transparent);
  --secondary-70: color-mix(in srgb, var(--secondary) 70%, transparent);
  --secondary-60: color-mix(in srgb, var(--secondary) 60%, transparent);
  --secondary-50: color-mix(in srgb, var(--secondary) 50%, transparent);
  --secondary-40: color-mix(in srgb, var(--secondary) 40%, transparent);
  --secondary-30: color-mix(in srgb, var(--secondary) 30%, transparent);
  --secondary-20: color-mix(in srgb, var(--secondary) 20%, transparent);
  --secondary-10: color-mix(in srgb, var(--secondary) 10%, transparent);
  --secondary-tint-1: color-mix(in oklab, var(--secondary) 80%, white);
  --secondary-tint-2: color-mix(in oklab, var(--secondary) 60%, white);
  --secondary-tint-3: color-mix(in oklab, var(--secondary) 35%, white);
  --secondary-tint-4: color-mix(in oklab, var(--secondary) 12%, white);
  --secondary-shade-1: color-mix(in oklab, var(--secondary) 85%, black);
  --secondary-shade-2: color-mix(in oklab, var(--secondary) 70%, black);
  --secondary-shade-3: color-mix(in oklab, var(--secondary) 50%, black);
  --secondary-shade-4: color-mix(in oklab, var(--secondary) 30%, black);

  /* ---- ACCENT ---- */
  --accent-90: color-mix(in srgb, var(--accent) 90%, transparent);
  --accent-80: color-mix(in srgb, var(--accent) 80%, transparent);
  --accent-70: color-mix(in srgb, var(--accent) 70%, transparent);
  --accent-60: color-mix(in srgb, var(--accent) 60%, transparent);
  --accent-50: color-mix(in srgb, var(--accent) 50%, transparent);
  --accent-40: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-tint-1: color-mix(in oklab, var(--accent) 80%, white);
  --accent-tint-2: color-mix(in oklab, var(--accent) 60%, white);
  --accent-tint-3: color-mix(in oklab, var(--accent) 35%, white);
  --accent-tint-4: color-mix(in oklab, var(--accent) 12%, white);
  --accent-shade-1: color-mix(in oklab, var(--accent) 85%, black);
  --accent-shade-2: color-mix(in oklab, var(--accent) 70%, black);
  --accent-shade-3: color-mix(in oklab, var(--accent) 50%, black);
  --accent-shade-4: color-mix(in oklab, var(--accent) 30%, black);

  /* ---- LIGHT (tints of a near-white are subtle; shades are the useful half) ---- */
  --light-90: color-mix(in srgb, var(--light) 90%, transparent);
  --light-80: color-mix(in srgb, var(--light) 80%, transparent);
  --light-70: color-mix(in srgb, var(--light) 70%, transparent);
  --light-60: color-mix(in srgb, var(--light) 60%, transparent);
  --light-50: color-mix(in srgb, var(--light) 50%, transparent);
  --light-40: color-mix(in srgb, var(--light) 40%, transparent);
  --light-30: color-mix(in srgb, var(--light) 30%, transparent);
  --light-20: color-mix(in srgb, var(--light) 20%, transparent);
  --light-10: color-mix(in srgb, var(--light) 10%, transparent);
  --light-tint-1: color-mix(in oklab, var(--light) 80%, white);
  --light-tint-2: color-mix(in oklab, var(--light) 60%, white);
  --light-tint-3: color-mix(in oklab, var(--light) 35%, white);
  --light-tint-4: color-mix(in oklab, var(--light) 12%, white);
  --light-shade-1: color-mix(in oklab, var(--light) 95%, black);
  --light-shade-2: color-mix(in oklab, var(--light) 90%, black);
  --light-shade-3: color-mix(in oklab, var(--light) 82%, black);
  --light-shade-4: color-mix(in oklab, var(--light) 70%, black);

  /* ---- DARK (shades of a near-black are subtle; tints are the useful half) ---- */
  --dark-90: color-mix(in srgb, var(--dark) 90%, transparent);
  --dark-80: color-mix(in srgb, var(--dark) 80%, transparent);
  --dark-70: color-mix(in srgb, var(--dark) 70%, transparent);
  --dark-60: color-mix(in srgb, var(--dark) 60%, transparent);
  --dark-50: color-mix(in srgb, var(--dark) 50%, transparent);
  --dark-40: color-mix(in srgb, var(--dark) 40%, transparent);
  --dark-30: color-mix(in srgb, var(--dark) 30%, transparent);
  --dark-20: color-mix(in srgb, var(--dark) 20%, transparent);
  --dark-10: color-mix(in srgb, var(--dark) 10%, transparent);
  --dark-tint-1: color-mix(in oklab, var(--dark) 85%, white);
  --dark-tint-2: color-mix(in oklab, var(--dark) 70%, white);
  --dark-tint-3: color-mix(in oklab, var(--dark) 50%, white);
  --dark-tint-4: color-mix(in oklab, var(--dark) 25%, white);
  --dark-shade-1: color-mix(in oklab, var(--dark) 85%, black);
  --dark-shade-2: color-mix(in oklab, var(--dark) 70%, black);
  --dark-shade-3: color-mix(in oklab, var(--dark) 50%, black);
  --dark-shade-4: color-mix(in oklab, var(--dark) 30%, black);
}

/* ==========================================================================
   _typography.css — fluid type scale + type primitives
   Type scale: Utopia, 320px @ 18px (×1.2) → 1400px @ 20px (×1.25)
   @link https://utopia.fyi/type/calculator?c=320,18,1.2,1400,20,1.25,7,4,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
   Families live in _brand.css. Role mapping (h1 → step-5 etc.) lives in _semantic.css.
   ========================================================================== */

:root {
  /* ---- Fluid type scale (step-0 = body) ---- */
  --step--4: clamp(0.512rem, 0.5516rem + -0.0452vw, 0.5425rem);
  --step--3: clamp(0.64rem, 0.6543rem + -0.0164vw, 0.651rem);
  --step--2: clamp(0.7813rem, 0.7757rem + 0.0278vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.919rem + 0.0926vw, 1rem);
  --step-0:  clamp(1.125rem, 1.088rem + 0.1852vw, 1.25rem);
  --step-1:  clamp(1.35rem, 1.287rem + 0.3148vw, 1.5625rem);
  --step-2:  clamp(1.62rem, 1.5213rem + 0.4935vw, 1.9531rem);
  --step-3:  clamp(1.944rem, 1.7966rem + 0.7369vw, 2.4414rem);
  --step-4:  clamp(2.3328rem, 2.1198rem + 1.0651vw, 3.0518rem);
  --step-5:  clamp(2.7994rem, 2.4985rem + 1.5042vw, 3.8147rem);
  --step-6:  clamp(3.3592rem, 2.9417rem + 2.0876vw, 4.7684rem);
  --step-7:  clamp(4.0311rem, 3.4594rem + 2.8583vw, 5.9605rem);

  /* ---- Families (brand families are set in _brand.css) ---- */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* ---- Line heights (unitless) ---- */
  --line-height-tight:  1.1;   /* display / h1-h2 */
  --line-height-snug:   1.25;  /* h3-h6, buttons */
  --line-height-normal: 1.5;   /* body */
  --line-height-loose:  1.7;   /* long-form serif body */

  /* ---- Letter spacing ---- */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;

  /* ---- Measure (line length) ---- */
  --measure-narrow: 45ch;
  --measure:        65ch;
  --measure-wide:   80ch;
}

/* ==========================================================================
   _spacing.css — Utopia fluid space scale (t-shirt sizes)
   Base = step-0 (18px → 20px). Same Utopia link as _typography.css.

   Single sizes  --space-{size}         grow slightly with the viewport
   One-up pairs  --space-{size}-{next}  grow a lot (e.g. s at 320px → m at 1400px)
   Custom pair   --space-s-l
   ========================================================================== */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.544rem + 0.0926vw, 0.625rem);
  --space-xs:  clamp(0.875rem, 0.8565rem + 0.0926vw, 0.9375rem);
  --space-s:   clamp(1.125rem, 1.088rem + 0.1852vw, 1.25rem);
  --space-m:   clamp(1.6875rem, 1.6319rem + 0.2778vw, 1.875rem);
  --space-l:   clamp(2.25rem, 2.1759rem + 0.3704vw, 2.5rem);
  --space-xl:  clamp(3.375rem, 3.2639rem + 0.5556vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3519rem + 0.7407vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.5278rem + 1.1111vw, 7.5rem);

  --space-3xs-2xs: clamp(0.3125rem, 0.2199rem + 0.463vw, 0.625rem);
  --space-2xs-xs:  clamp(0.5625rem, 0.4514rem + 0.5556vw, 0.9375rem);
  --space-xs-s:    clamp(0.875rem, 0.7639rem + 0.5556vw, 1.25rem);
  --space-s-m:     clamp(1.125rem, 0.9028rem + 1.1111vw, 1.875rem);
  --space-m-l:     clamp(1.6875rem, 1.4468rem + 1.2037vw, 2.5rem);
  --space-l-xl:    clamp(2.25rem, 1.8056rem + 2.2222vw, 3.75rem);
  --space-xl-2xl:  clamp(3.375rem, 2.8935rem + 2.4074vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.6111rem + 4.4444vw, 7.5rem);

  --space-s-l: clamp(1.125rem, 0.7176rem + 2.037vw, 2.5rem);
}

/* ==========================================================================
   _layout.css — grid, containers, layering, aspect ratios

   Breakpoints (custom properties can't be used inside @media, so these are
   fixed values — write media queries mobile-first with min-width):
     480px  mobile landscape   (Bricks: mobile portrait ends at 478)
     768px  tablet             (Bricks: mobile landscape ends at 767)
     992px  desktop            (Bricks: tablet portrait ends at 991)
     1280px wide
   Prefer fluid tokens and container queries; reach for breakpoints last.
   ========================================================================== */

:root {
  /* ---- Grid (Utopia grid: 12 cols, gutter s→l, max 1400px) ---- */
  --grid-max-width: 87.5rem;          /* 1400px */
  --grid-gutter:    var(--space-s-l);
  --grid-columns:   12;

  /* ---- Containers ---- */
  --container-xs: 36rem;   /* 576px  — forms, narrow CTAs */
  --container-s:  48rem;   /* 768px  — article body */
  --container-m:  64rem;   /* 1024px */
  --container-l:  76rem;   /* 1216px */
  --container-xl: var(--grid-max-width);

  /* ---- Layering (WordPress admin bar sits at 99999 — stay below it) ---- */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ---- Aspect ratios ---- */
  --ratio-square:   1;
  --ratio-video:    16 / 9;
  --ratio-photo:    4 / 3;
  --ratio-portrait: 4 / 5;
  --ratio-og:       1.91 / 1;   /* social share card */
}

/* ==========================================================================
   _effects.css — radius, borders, shadows, motion
   ========================================================================== */

:root {
  /* ---- Radius (brand default chosen in _brand.css) ---- */
  --radius-none:   0;
  --radius-s:      0.25rem;
  --radius-m:      0.5rem;
  --radius-l:      1rem;
  --radius-xl:     1.5rem;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---- Border widths ---- */
  --border-width-thin:   1px;
  --border-width-medium: 2px;
  --border-width-thick:  4px;

  /* ---- Shadows (tinted with the brand dark so they never look grey/muddy) ---- */
  --shadow-color: color-mix(in srgb, var(--dark) 14%, transparent);
  --shadow-s: 0 1px 2px var(--shadow-color);
  --shadow-m: 0 2px 4px var(--shadow-color), 0 6px 16px var(--shadow-color);
  --shadow-l: 0 4px 8px var(--shadow-color), 0 16px 40px var(--shadow-color);

  /* ---- Motion ---- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-base: var(--duration-base) var(--ease-out);
}

/* Reduced motion handled once, here — components never need their own check
   for transition/animation durations that use these tokens. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}

/* ==========================================================================
   _semantic.css — role tokens. COMPONENTS REFERENCE THESE FIRST.
   Maps primitives to jobs ("body text", "section padding", "h2 size").
   A client tweak that's about a role (e.g. "links should be accent")
   is a one-line override here, not a component edit.
   ========================================================================== */

:root {
  /* ---- Surfaces ---- */
  --bg-body:    var(--white);
  --bg-alt:     var(--light);           /* alternating sections */
  --bg-inverse: var(--dark);            /* dark sections; text uses --on-dark */
  --bg-brand:   var(--primary);         /* text uses --on-primary */

  /* ---- Text ---- */
  --text-body:    var(--dark);
  --text-heading: var(--dark);
  --text-muted:   var(--dark-tint-2);   /* solid color, not opacity — keeps contrast predictable */
  --text-inverse: var(--on-dark);

  /* ---- Links ---- */
  --link-color:       var(--primary);
  --link-color-hover: var(--primary-shade-2);

  /* ---- Borders & focus ---- */
  --border-color:   var(--black-20);
  --border-default: var(--border-width-thin) solid var(--border-color);
  --focus-ring-color:  var(--accent);
  --focus-ring:        var(--border-width-medium) solid var(--focus-ring-color);
  --focus-ring-offset: 2px;
  --selection-bg:   var(--accent-20);

  /* ---- Type roles ---- */
  --h1-size: var(--step-5);
  --h2-size: var(--step-4);
  --h3-size: var(--step-3);
  --h4-size: var(--step-2);
  --h5-size: var(--step-1);
  --h6-size: var(--step-0);
  --body-size:    var(--step-0);
  --lead-size:    var(--step-1);   /* intro paragraph */
  --small-size:   var(--step--1);
  --caption-size: var(--step--2);  /* legal disclaimers, "Paid for by" */
  --display-size: var(--step-7);   /* hero only */

  /* ---- Spacing roles ---- */
  --section-padding-block:  var(--space-xl-2xl);
  --section-padding-inline: var(--grid-gutter);
  --flow-space:   var(--space-s);      /* gap between stacked text elements */
  --content-gap:  var(--space-s-m);    /* gap between cards / grid items */
  --card-padding: var(--space-s-m);

  /* ---- Interactive roles (buttons, inputs) ---- */
  --control-padding-block:  var(--space-2xs);
  --control-padding-inline: var(--space-s);
  --control-radius:         var(--radius-default);
  --control-font-weight:    var(--font-weight-semibold);
  --card-radius:            var(--radius-default);
}