/**
 * @file theme.css
 * "The Architectural Terminal" design system variables for deploya.
 *
 * Design system: DESIGN.md — dark-first, monospaced authority,
 * ambient glows, zero-radius precision.
 *
 * Palette:
 *   Primary (System Success): #00FFB8
 *   Secondary (Data/Highlight): #00D9FF
 *
 * Surfaces (tonal stacking):
 *   surface:                #0A0A0A (The void)
 *   surface-container-low:  #131313 (Section background)
 *   surface-container-high: #201f1f (Elevated components)
 *
 * Neutrals:
 *   on-surface:    #F8F9FA (Primary text on dark)
 *   muted-text:    #ADB5BD (Secondary/muted text)
 *   outline-variant: #343A40 (Ghost borders at 15% opacity)
 *
 * Status:
 *   Critical Alert: #FF5757
 *   Amber Glow:    #FFB800
 */

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #f8f9fa;
  --card-foreground: #2a2a2a;
  --primary: #00d9ff;
  --primary-foreground: #2a2a2a;
  --secondary: #00ffb8;
  --secondary-foreground: #2a2a2a;
  --muted: #e4f6f9;
  --muted-foreground: #dee2e6;
  --accent: #0099b8;
  --accent-foreground: #f8f9fa;
  --destructive: #ff5757;
  --destructive-foreground: #ffffff;
  --warning: #ffb800;
  --warning-foreground: #ffffff;
  --border: #ced4da;
  --input: #0a0a0a;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.75rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 2px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.06;
  --shadow-color: #0a0a0a;
  --shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.03);
  --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.04);
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.06), 0 1px 2px -1px hsl(0 0% 0% / 0.04);
  --shadow: 0 2px 4px 0 hsl(0 0% 0% / 0.06), 0 1px 3px -1px hsl(0 0% 0% / 0.04);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.06), 0 2px 4px -2px hsl(0 0% 0% / 0.04);
  --shadow-lg: 0 8px 16px -2px hsl(0 0% 0% / 0.06), 0 4px 6px -3px hsl(0 0% 0% / 0.04);
  --shadow-xl: 0 16px 24px -4px hsl(0 0% 0% / 0.06), 0 8px 10px -4px hsl(0 0% 0% / 0.03);
  --shadow-2xl: 0 24px 48px -8px hsl(0 0% 0% / 0.08);

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

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

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}
.dark {
  /* Surface layering */
  --background: #0a0a0a;
  --foreground: #f8f9fa;
  --surface: #0a0a0a;
  --surface-container-low: #131313;
  --surface-container-high: #201f1f;

  /* Card uses elevated surface */
  --card: #201f1f;
  --card-foreground: #f8f9fa;

  /* Primary: "System Success" / Go signal */
  --primary: #00ffb8;
  --primary-foreground: #0a0a0a;
  --primary-dim: rgba(0, 255, 184, 0.15);

  /* Secondary: data visualization, highlights, interactive accents */
  --secondary: #00d9ff;
  --secondary-foreground: #0a0a0a;
  --secondary-dim: rgba(0, 217, 255, 0.15);

  /* Muted */
  --muted: #495057;
  --muted-foreground: #dee2e6;

  /* Accent */
  --accent: #2a2a2a;
  --accent-foreground: #f8f9fa;

  /* Status */
  --destructive: #ff5757;
  --destructive-foreground: #f8f9fa;
  --warning: #ffb800;
  --warning-foreground: #0a0a0a;

  /* Ghost border (outline-variant at 15% opacity) */
  --border: rgba(52, 58, 64, 0.15);
  --outline-variant: #f8f9fa;
  --input: #f8f9fa;

  /* Typography — monospaced authority */
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "IBM Plex Mono", "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* Zero radius — no rounded corners */
  --radius: 0px;

  /* Ambient glows (the shadow alternative) */
  --shadow-x: 0;
  --shadow-y: 0;
  --shadow-blur: 15px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.2;
  --shadow-color: #00ffb8;
  --shadow-2xs: none;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: none;
  --shadow-md: none;
  --shadow-lg: 0 0 15px rgba(0, 255, 184, 0.1);
  --shadow-xl: 0 0 25px rgba(0, 255, 184, 0.15);
  --shadow-2xl: 0 0 40px rgba(0, 255, 184, 0.2);
}