/* Ace Countertops Theme Kit — GENERATED by brand/build-tokens.mjs. Do not edit.
 * Source: brand/tokens/tokens.json  (v1.0.0)
 *
 * Media queries cannot read custom properties, so the six breakpoints are
 * repeated here as literals for hand-authoring. Keep them in sync by
 * regenerating, never by typing a new number:
 *   xs   @media (min-width: 320px)   phone portrait
 *   sm   @media (min-width: 480px)   phone landscape
 *   md   @media (min-width: 768px)   tablet portrait — PRIMARY
 *   lg   @media (min-width: 1024px)   tablet landscape — PRIMARY
 *   xl   @media (min-width: 1280px)   laptop
 *   2xl  @media (min-width: 1600px)   showroom display
 */

:root {
  /* ── color ─────────────────────────────────────────────────────── */
  /* Palette sampled from the printed door hanger (design/VOICE.md): near-black, */
  /* a gold-foil ramp, paper white. The ink/gold pair is the brand; everything */
  /* else is derived surface work. */
  --ace-color-ink-300: #4A4232;  /* strong border, dividers on gold surfaces */
  --ace-color-ink-400: #2D2A24;  /* border */
  --ace-color-ink-500: #262420;  /* surface hover */
  --ace-color-ink-600: #211F1B;  /* surface 2 — nested panels, inputs */
  --ace-color-ink-700: #1B1A17;  /* raised surface — cards, panels */
  --ace-color-ink-800: #141414;  /* primary background */
  --ace-color-ink-900: #0F0F0E;  /* deepest background, page behind the app shell */
  --ace-color-gold-100: #F1E2A0;  /* gold highlight — top of the foil ramp, hover text */
  --ace-color-gold-200: #D2AE5A;  /* gold — THE brand accent, links, focus rings */
  --ace-color-gold-300: #8C6E2E;  /* gold deep — bottom of the ramp, gradients, pressed */
  --ace-color-gold-contrast: #201A0C;  /* label color on a gold fill; never use fg on gold */
  --ace-color-paper-100: #F5F1E6;  /* foreground on dark */
  --ace-color-paper-200: #C8C1B2;  /* muted foreground */
  --ace-color-paper-300: #9B9483;  /* subtle foreground, captions */
  --ace-color-paper-000: #FFFFFF;  /* paper white — print, light-mode background */
  --ace-color-state-success: #6FBF8B;
  --ace-color-state-warn: #E0B355;
  --ace-color-state-danger: #E07B6B;
  --ace-color-state-info: #7BA7CF;
  --ace-color-alpha-gold-wash: rgba(210, 174, 90, 0.12);
  --ace-color-alpha-gold-wash-strong: rgba(210, 174, 90, 0.20);
  --ace-color-alpha-scrim: rgba(15, 15, 14, 0.72);
  --ace-color-alpha-shade: rgba(0, 0, 0, 0.32);

  /* ── color-family ───────────────────────────────────────────────── */
  /* The 17 navigation anchors the showcase groups every surface by. These are */
  /* BRAND vocabulary — the names a rep says out loud — so they live in the theme */
  /* kit, not in one app. hex is the chip shown in the UI and the anchor the */
  /* swatch classifier nearest-neighbours against in OKLab. */
  --ace-color-family-white: #F5F5F2;  /* White */
  --ace-color-family-cream: #EFE7D3;  /* Cream & Ivory */
  --ace-color-family-beige: #D8C4A0;  /* Beige & Tan */
  --ace-color-family-gray: #8A8D8F;  /* Gray */
  --ace-color-family-charcoal: #36393B;  /* Charcoal */
  --ace-color-family-black: #1C1C1C;  /* Black */
  --ace-color-family-brown: #6B4A2F;  /* Brown */
  --ace-color-family-bronze: #7D5A2E;  /* Bronze */
  --ace-color-family-copper: #A85C32;  /* Copper */
  --ace-color-family-red: #9E3B2E;  /* Red & Terracotta */
  --ace-color-family-orange: #C9702D;  /* Orange */
  --ace-color-family-gold: #C9A227;  /* Gold & Yellow */
  --ace-color-family-green: #4A6B4A;  /* Green */
  --ace-color-family-blue: #3A5A80;  /* Blue */
  --ace-color-family-slate: #4A5560;  /* Slate */
  --ace-color-family-silver: #B8BCC0;  /* Silver & Metallic */
  --ace-color-family-multicolor: #9B8579;  /* Multi & Blend */

  /* ── font ──────────────────────────────────────────────────────── */
  --ace-font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --ace-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* ── font-size ──────────────────────────────────────────────────── */
  /* Fluid. min is the xs (320px) size, max is the 2xl (1600px) size. A rep holds */
  /* the tablet at arm's length and a homeowner leans in — nothing below 14px */
  /* ships. */
  --ace-font-size-xs: clamp(0.8125rem, 0.7969rem + 0.0781vw, 0.875rem);
  --ace-font-size-sm: clamp(0.875rem, 0.8594rem + 0.0781vw, 0.9375rem);
  --ace-font-size-base: clamp(1rem, 0.9844rem + 0.0781vw, 1.0625rem);
  --ace-font-size-lg: clamp(1.125rem, 1.0938rem + 0.1563vw, 1.25rem);
  --ace-font-size-xl: clamp(1.375rem, 1.3125rem + 0.3125vw, 1.625rem);
  --ace-font-size-2xl: clamp(1.75rem, 1.625rem + 0.625vw, 2.25rem);
  --ace-font-size-3xl: clamp(2.125rem, 1.9063rem + 1.0938vw, 3rem);
  --ace-font-size-4xl: clamp(2.5rem, 2.125rem + 1.875vw, 4rem);

  /* ── font-weight ────────────────────────────────────────────────── */
  --ace-font-weight-regular: 400;
  --ace-font-weight-medium: 500;
  --ace-font-weight-semibold: 600;
  --ace-font-weight-bold: 700;

  /* ── line-height ────────────────────────────────────────────────── */
  --ace-line-height-tight: 1.14;
  --ace-line-height-snug: 1.35;
  --ace-line-height-body: 1.6;

  /* ── letter-spacing ─────────────────────────────────────────────── */
  --ace-letter-spacing-heading: -0.01em;
  --ace-letter-spacing-normal: 0;
  --ace-letter-spacing-caps: 0.08em;

  /* ── space ─────────────────────────────────────────────────────── */
  /* 4px base scale. Use these, never a raw px value. */
  --ace-space-0: 0;
  --ace-space-1: 0.25rem;
  --ace-space-2: 0.5rem;
  --ace-space-3: 0.75rem;
  --ace-space-4: 1rem;
  --ace-space-5: 1.25rem;
  --ace-space-6: 1.5rem;
  --ace-space-8: 2rem;
  --ace-space-10: 2.5rem;
  --ace-space-12: 3rem;
  --ace-space-16: 4rem;
  --ace-space-20: 5rem;
  --ace-space-24: 6rem;

  /* ── radius ────────────────────────────────────────────────────── */
  --ace-radius-sm: 4px;
  --ace-radius-md: 8px;
  --ace-radius-lg: 12px;
  --ace-radius-xl: 18px;
  --ace-radius-full: 9999px;

  /* ── elevation ─────────────────────────────────────────────────── */
  --ace-elevation-flat: none;
  --ace-elevation-raised: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.32);
  --ace-elevation-menu: 0 18px 40px rgba(0,0,0,.45);
  --ace-elevation-modal: 0 32px 80px rgba(0,0,0,.6);

  /* ── motion ────────────────────────────────────────────────────── */
  /* Everything must be wrapped in a prefers-reduced-motion guard. A presentation */
  /* tool that lurches is worse than one that snaps. */
  --ace-motion-instant: 0ms;
  --ace-motion-fast: 120ms;
  --ace-motion-base: 200ms;
  --ace-motion-slow: 320ms;
  --ace-motion-reveal: 480ms;
  --ace-motion-ease: cubic-bezier(.4, 0, .2, 1);
  --ace-motion-ease-out: cubic-bezier(0, 0, .2, 1);
  --ace-motion-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── breakpoint ────────────────────────────────────────────────── */
  /* SIX breakpoints. Every component in the showcase declares behaviour at ALL */
  /* of them — that is a review gate. md and lg are the primary targets (the */
  /* rep's tablet). */
  --ace-breakpoint-xs: 320px;
  --ace-breakpoint-sm: 480px;
  --ace-breakpoint-md: 768px;
  --ace-breakpoint-lg: 1024px;
  --ace-breakpoint-xl: 1280px;
  --ace-breakpoint-2xl: 1600px;

  /* ── container ─────────────────────────────────────────────────── */
  /* Container-query sizes. Components respond to their SLOT, not the viewport — */
  /* that is what lets one swatch card work in a 3-up grid, a 10-up compare wall, */
  /* and a full-bleed detail pane without a rewrite. */
  --ace-container-compact: 240px;
  --ace-container-cozy: 360px;
  --ace-container-roomy: 520px;
  --ace-container-wide: 760px;
  --ace-container-panorama: 1100px;

  /* ── layout ────────────────────────────────────────────────────── */
  --ace-layout-maxw: 1440px;
  --ace-layout-gutter: clamp(1rem, 4vw, 3rem);
  --ace-layout-rail: 72px;  /* collapsed nav rail width */
  --ace-layout-rail-open: 264px;  /* expanded nav rail width */
  --ace-layout-tray: 112px;  /* compare tray height when docked */
  --ace-layout-touch-min: 44px;  /* minimum touch target — never smaller */

  /* ── z ─────────────────────────────────────────────────────────── */
  --ace-z-base: 0;
  --ace-z-raised: 10;
  --ace-z-sticky: 50;
  --ace-z-tray: 60;
  --ace-z-menu: 70;
  --ace-z-modal: 80;
  --ace-z-toast: 90;
  --ace-z-skip: 100;

  color-scheme: dark;
}

/* Opt in with <html data-theme="light">. Gold is invariant across themes. */
:root[data-theme="light"] {
  --ace-color-ink-900: #FFFFFF;
  --ace-color-ink-800: #F7F5F0;
  --ace-color-ink-700: #FFFFFF;
  --ace-color-ink-600: #F1EDE4;
  --ace-color-ink-500: #E8E2D5;
  --ace-color-ink-400: #DED7C7;
  --ace-color-ink-300: #BFB49A;
  --ace-color-paper-100: #1A1814;
  --ace-color-paper-200: #4A453B;
  --ace-color-paper-300: #6E6759;
  --ace-color-gold-200: #8C6E2E;  /* darkened for contrast on paper */
  color-scheme: light;
}

/* A presentation tool that lurches mid-sentence is worse than one that snaps. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ace-motion-fast: 0ms;
    --ace-motion-base: 0ms;
    --ace-motion-slow: 0ms;
    --ace-motion-reveal: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}