/* ============================================================
   Clevr House — Colors & Type Foundation
   ============================================================
   Import this file at the root of any artifact. All tokens use
   CSS custom properties so they can be themed per-surface.
   ------------------------------------------------------------ */

/* ---------- FONTS --------------------------- */
/* Orbitron — local brand files */
@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; }

/* Inter (body) + JetBrains Mono — still via Google until brand files provided */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ========== COLOR — PRIMITIVES ========== */
  /* Clevr Blue — the core brand hue sampled from the logo & buttons */
  --clevr-blue-50:  #EAF3FE;
  --clevr-blue-100: #CFE2FC;
  --clevr-blue-200: #9EC5F9;
  --clevr-blue-300: #6AA6F5;
  --clevr-blue-400: #3F8AF0;
  --clevr-blue-500: #2F80ED; /* PRIMARY — buttons, links, logo bg */
  --clevr-blue-600: #1E6FDB;
  --clevr-blue-700: #1759B4;
  --clevr-blue-800: #13458C;
  --clevr-blue-900: #0E3266;

  /* Neutrals — cool grays with a faint blue bias */
  --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;

  /* Semantic — status */
  --success:  #2BB673;
  --warning:  #F5A524;
  --danger:   #E5484D;
  --info:     var(--clevr-blue-500);

  /* Accent — secondary for data/tags (soldering-flux amber & pcb-green) */
  --pcb-green:  #2FAE65; /* echoes ENIG PCB masks */
  --flux-amber: #F5B82E;

  /* ========== COLOR — SEMANTIC ========== */
  /* Surfaces */
  --bg-page:        var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-100);
  --bg-inverse:     var(--neutral-900);
  --bg-brand:       var(--clevr-blue-500);
  --bg-brand-soft:  var(--clevr-blue-50);

  /* Foreground */
  --fg-1: var(--neutral-900); /* primary text */
  --fg-2: var(--neutral-700); /* secondary */
  --fg-3: var(--neutral-500); /* tertiary / captions */
  --fg-4: var(--neutral-400); /* disabled */
  --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);

  /* ========== TYPOGRAPHY ========== */
  --font-display: 'Orbitron', 'Arial Black', sans-serif;  /* "Clevr House", page titles, H1/H2 */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, 1.25 ratio, rooted at 16px body */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --ls-display: 0.02em;   /* Orbitron reads best with a touch of tracking */
  --ls-title:   0.01em;
  --ls-body:    0;
  --ls-caps:    0.08em;

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

  /* ========== SPACING / RADII / SHADOW / MOTION ========== */
  --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;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;   /* cards */
  --radius-xl: 20px;
  --radius-2xl: 28px;  /* hero CTAs, logo tile echo */
  --radius-pill: 999px;

  --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-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);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these instead of tags directly when you need the brand voice.
   ------------------------------------------------------------ */
.ch-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.ch-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.ch-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}
.ch-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ch-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ch-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ch-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.ch-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ch-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.ch-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  color: var(--neutral-800);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}
.ch-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
}
.ch-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}
.ch-link:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}

/* Default body reset convenience — opt-in by adding .ch-root to <body> */
.ch-root {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}