/* ============================================================
   Clevr Parts — design tokens (adapted from the Clevr House
   design system for first-party, CSP-safe static hosting).
   No third-party requests: Orbitron is self-hosted; body and
   mono fall back to the platform font stack.
   ------------------------------------------------------------ */

@font-face { font-family: 'Orbitron'; src: url('fonts/Orbitron-Regular.ttf') format('truetype');   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('fonts/Orbitron-Medium.ttf') format('truetype');    font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('fonts/Orbitron-SemiBold.ttf') format('truetype');  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('fonts/Orbitron-Bold.ttf') format('truetype');      font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('fonts/Orbitron-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('fonts/Orbitron-Black.ttf') format('truetype');     font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Clevr Blue — core brand hue */
  --clevr-blue-50:  #EAF3FE;
  --clevr-blue-100: #CFE2FC;
  --clevr-blue-200: #9EC5F9;
  --clevr-blue-300: #6AA6F5;
  --clevr-blue-400: #3F8AF0;
  --clevr-blue-500: #2F80ED;
  --clevr-blue-600: #1E6FDB;
  --clevr-blue-700: #1759B4;
  --clevr-blue-800: #13458C;
  --clevr-blue-900: #0E3266;

  /* Cool neutrals */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F9FC;
  --neutral-100: #EEF2F7;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  /* Status + accents */
  --success:  #2BB673;
  --warning:  #F5A524;
  --danger:   #E5484D;
  --pcb-green:  #2FAE65;
  --flux-amber: #F5B82E;

  /* Semantic surfaces */
  --bg-page:       var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --bg-brand:      var(--clevr-blue-500);
  --bg-brand-soft: var(--clevr-blue-50);

  /* Foreground */
  --fg-1: var(--neutral-900);
  --fg-2: var(--neutral-700);
  --fg-3: var(--neutral-500);
  --fg-4: var(--neutral-400);
  --fg-on-brand: var(--neutral-0);
  --fg-brand:      var(--clevr-blue-600);
  --fg-link:       var(--clevr-blue-600);
  --fg-link-hover: var(--clevr-blue-700);

  /* Borders */
  --border-subtle: var(--neutral-200);
  --border-base:   var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand:  var(--clevr-blue-500);

  /* Type families — Orbitron self-hosted; body/mono use platform stacks */
  --font-display: 'Orbitron', 'Arial Black', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

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

  /* Spacing */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Radii */
  --radius-xs: 4px;  --radius-sm: 6px;  --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-brand: 0 10px 28px rgba(47, 128, 237, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Motion */
  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-slow:   360ms;
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}