/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for ByteTheme.
 *
 * ───────────────────────────────────────────────────────────────────────────
 * Chattanooga.Digital — Gig City Brand Tokens (recipe 01)
 * ───────────────────────────────────────────────────────────────────────────
 * Source of truth: docs/private/ChattanoogaDigital_DesignDirection.docx §2
 * Visual reference: docs/mockups/chattanoogan/index.html
 * Reproduction guide: docs/RECIPE-01-BRANDING.md
 *
 * If you customize these values, they take effect immediately on local
 * (bind mount). On staging/production, the fix-settings service rebuilds
 * Tailwind CSS via `npx tailwindcss --minify` after every deploy.
 *
 * Tooling tip: https://tweakcn.com generates shadcn-compatible token blocks.
 * ───────────────────────────────────────────────────────────────────────────
 */

html {
  scroll-behavior: smooth;
}

:root {
  /* ─── Brand palette — exact hex from DesignDirection §2 ─── */
  /* Primary blues */
  --cd-fiber-blue:     #0A4D8C;  /* Walnut Street Bridge blue, EPB fiber */
  --cd-grid-teal:      #0D7377;  /* Smart-grid switch / link accent */
  --cd-deep-current:   #1A252F;  /* Tennessee River at night, footer */

  /* Vegetation + warmth */
  --cd-signal-green:   #7AB648;  /* Fiber light, success, growth */
  --cd-bridge-copper:  #B87333;  /* Patina copper — large text + decorative only (3.37:1 on limestone, fails AA for body) */
  --cd-bridge-copper-deep: #8C5320; /* Darker copper for small text on limestone — 5.53:1, passes WCAG AA */

  /* Stone + paper */
  --cd-river-slate:    #2C3E50;  /* Body text, ink */
  --cd-mountain-fog:   #ECF0F1;  /* Card surfaces in dark sections */
  --cd-limestone:      #F5F1EB;  /* Page background — warm off-white */

  /* ─── Semantic mapping (Byte / shadcn slots) ─── */
  --background: var(--cd-limestone);
  --foreground: var(--cd-river-slate);
  --card: #ffffff;
  --card-foreground: var(--cd-river-slate);
  --primary: var(--cd-fiber-blue);
  --primary-foreground: #ffffff;
  --secondary: var(--cd-grid-teal);
  --secondary-foreground: #ffffff;
  --muted: oklch(0.95 0.01 230);
  --muted-foreground: var(--cd-grid-teal);
  --accent: var(--cd-bridge-copper);
  --accent-foreground: #ffffff;
  /* Accessible accent for SOLID FILLS behind white text (#128). The brand
     --accent (#B87333 patina copper) is 3.79:1 with white — fails WCAG AA for
     a button face, and the old `hover:bg-accent/80` made it worse (2.81:1 on a
     light page, because /80 opacity lightens the fill toward the page). The
     secondary button uses these instead: deep copper at rest (6.23:1) and a
     solid darker hover (7.58:1) — no opacity blend, so contrast holds on any
     background. --accent stays as-is for decorative/large-text use. */
  --accent-button: var(--cd-bridge-copper-deep);
  --accent-button-hover: #7a481c;
  /* Accent as TEXT on a light fill (#128, secondary-inverted button). The brand
     --accent (#B87333) is only 3.79:1 on white — fails AA. Deep copper is 5.53:1
     on limestone / passes AA, so use it for copper-on-light text. */
  --accent-text: var(--cd-bridge-copper-deep);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: rgba(10, 77, 140, 0.18);
  --input: rgba(10, 77, 140, 0.18);

  /* ─── Typography stack — open-source via Bunny Fonts ─── */
  /* Default body — Inter (techspec-friendly, geometric, neutral) */
  --font-sans: "Inter", "Helvetica Neue", Arial, Helvetica, sans-serif;
  /* Editorial display — Fraunces (variable serif w/ optical sizing) */
  --font-serif: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  /* Code / technical callouts — JetBrains Mono */
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "Menlo", "Consolas", monospace;

  --radius: 0.375rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: var(--cd-deep-current);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}