/**
 * @file theme.css
 * FlyVolt dark theme — shadcn/ui-compatible CSS variables.
 *
 * Dark-only. No light mode toggle.
 * Primary palette per FlyVolt brand brief v1.0.
 *
 * Copy this file to your web root (next to index.php) to override without
 * rebuilding. Clear Drupal cache after changes.
 */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --background:          #0B0F14;  /* near-black ink        */
  --foreground:          #F5F7FA;  /* off-white             */

  --card:                #161A22;  /* graphite              */
  --card-foreground:     #F5F7FA;

  --muted:               #1C2230;  /* slightly lifted       */
  --muted-foreground:    #8A94A8;  /* subdued text          */

  /* ── Brand accent ─────────────────────────────────────── */
  --primary:             #43bb96;  /* FlyVolt green         */
  --primary-foreground:  #0B0F14;

  --accent:              #3FB6FF;  /* cyan blue             */
  --accent-foreground:   #0B0F14;

  /* ── Secondary ───────────────────────────────────────── */
  --secondary:           #1E2738;
  --secondary-foreground:#F5F7FA;

  /* ── Semantic ────────────────────────────────────────── */
  --destructive:         oklch(0.6368 0.2078 25.3313); /* red — errors/alerts */
  --destructive-foreground: #F5F7FA;

  /* ── Hover accent (red) ──────────────────────────────── */
  --hover-accent:        oklch(0.6368 0.2078 25.3313); /* #e05a5a red        */
  --hover-accent-muted:  oklch(0.6368 0.2078 25.3313 / 0.12);

  /* ── Chrome ──────────────────────────────────────────── */
  --border:              #252D3D;
  --input:               #252D3D;
  --ring:                #43bb96;

  /* ── Typography ──────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-serif:   ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace;

  /* ── Radius ──────────────────────────────────────────── */
  --radius: 0rem;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-x:       0;
  --shadow-y:       1px;
  --shadow-blur:    3px;
  --shadow-spread:  0px;
  --shadow-opacity: 0.4;
  --shadow-color:   oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.2);
  --shadow-xs:  0 1px 3px 0px hsl(0 0% 0% / 0.3);
  --shadow-sm:  0 1px 3px 0px hsl(0 0% 0% / 0.4), 0 1px 2px -1px hsl(0 0% 0% / 0.3);
  --shadow:     0 1px 3px 0px hsl(0 0% 0% / 0.4), 0 1px 2px -1px hsl(0 0% 0% / 0.3);
  --shadow-md:  0 1px 3px 0px hsl(0 0% 0% / 0.4), 0 2px 4px -1px hsl(0 0% 0% / 0.3);
  --shadow-lg:  0 1px 3px 0px hsl(0 0% 0% / 0.4), 0 4px 6px -1px hsl(0 0% 0% / 0.3);
  --shadow-xl:  0 1px 3px 0px hsl(0 0% 0% / 0.4), 0 8px 10px -1px hsl(0 0% 0% / 0.3);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.4), 0 12px 14px -1px hsl(0 0% 0% / 0.3);

  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Navbar height — explicit px values to avoid Tailwind --spacing override */
  --navbar-height: 60px;

  @media (min-width: 768px) {
    --navbar-height: 72px;
  }
}