/* ============================================================
   BayBuild — colors_and_type.css
   Single source of truth for tokens used in this design system.
   Mirrors packages/tokens/tokens.css in the bayline-apb monorepo.
   Spec: BRANDING_SPEC.md §3, STYLE_GUIDE.md, THEME_AND_TOKENS.md
   ============================================================ */

/* Fonts ------------------------------------------------------ */
/* Inter Variable + JetBrains Mono are the production families.
   We load them from Google Fonts since no font files were
   shipped with the codebase context. SUBSTITUTION NOTE: identical
   families, but if you have licensed copies of Inter Variable
   please drop the woff2 files into fonts/ and reroute @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   1. Raw brand palette (the only place hex values appear)
   ============================================================ */
:root {
  /* BayBuild Gold — the single brand accent family */
  --color-brand-gold:        #C89B2D;
  --color-brand-gold-hover:  #A97F1F;
  --color-brand-gold-tint:   #F3E6BF;

  /* Dark surfaces (the flagship expression) */
  --color-dark-bg:           #0F1218;
  --color-dark-panel:        #151A22;
  --color-dark-elevated:     #1C2330;

  /* Light surfaces — warm off-white, never blue-grey */
  --color-light-bg:          #F7F6F3;
  --color-light-panel:       #FFFFFF;
  --color-light-alt:         #F1EFEA;

  /* Status families (semantic; orange = warning only) */
  --color-success-50:        #ECFDF5;
  --color-success-500:       #10B981;
  --color-success-700:       #047857;
  --color-warning-50:        #FFFBEB;
  --color-warning-500:       #F59E0B;
  --color-warning-700:       #B45309;
  --color-danger-50:         #FEF2F2;
  --color-danger-500:        #EF4444;
  --color-danger-700:        #B91C1C;
  --color-info-50:           #EFF6FF;
  --color-info-500:          #3B82F6;
  --color-info-700:          #1D4ED8;

  /* Type families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Inter', system-ui, sans-serif; /* same family, heavier weights */

  /* Type scale (px) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-normal: 0;
  --ls-wide:  0.02em;
  --ls-eyebrow: 0.08em;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;   /* rounded-lg */
  --radius-lg: 12px;  /* rounded-xl — buttons, fields, nested cards */
  --radius-xl: 16px;  /* rounded-2xl — top-level app cards */
  --radius-pill: 9999px;

  /* Spacing scale (4px base) */
  --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;

  /* Shadows — restrained, operator-grade */
  --shadow-xs: 0 1px 1px rgba(15, 18, 24, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 18, 24, 0.06), 0 1px 3px rgba(15, 18, 24, 0.04);
  --shadow-md: 0 4px 10px rgba(15, 18, 24, 0.06), 0 2px 4px rgba(15, 18, 24, 0.04);
  --shadow-lg: 0 12px 28px rgba(15, 18, 24, 0.10), 0 4px 8px rgba(15, 18, 24, 0.04);
  --shadow-focus: 0 0 0 3px rgba(200, 155, 45, 0.30);
}

/* ============================================================
   2. Semantic tokens — light mode (default)
   ============================================================ */
:root,
[data-theme='light'] {
  /* Surfaces (page → content) */
  --color-bg:              var(--color-light-bg);
  --color-bg-section:      var(--color-light-alt);
  --color-surface:         var(--color-light-panel);
  --color-surface-raised:  var(--color-light-panel);
  --color-surface-overlay: var(--color-light-panel);

  /* Text */
  --color-text-primary:    #1E2430;
  --color-text-secondary:  #667085;
  --color-text-tertiary:   #98A2B3;
  --color-text-inverse:    #FFFFFF;
  --color-text-on-accent:  #1E2430; /* near-black reads better on gold */

  /* Borders */
  --color-border-subtle:   #E5E7EB;
  --color-border:          #D7DCE3;
  --color-border-strong:   #98A2B3;

  /* Accent (preset-driven; default = BayBuild Gold) */
  --color-accent:          var(--color-brand-gold);
  --color-accent-hover:    var(--color-brand-gold-hover);
  --color-accent-light:    var(--color-brand-gold-tint);
  --color-brand-primary:   var(--color-brand-gold);

  /* Status */
  --color-success-bg:      var(--color-success-50);
  --color-success-fg:      var(--color-success-700);
  --color-success-border:  #A7F3D0;
  --color-warning-bg:      var(--color-warning-50);
  --color-warning-fg:      var(--color-warning-700);
  --color-warning-border:  #FDE68A;
  --color-danger-bg:       var(--color-danger-50);
  --color-danger-fg:       var(--color-danger-700);
  --color-danger-border:   #FECACA;
  --color-info-bg:         var(--color-info-50);
  --color-info-fg:         var(--color-info-700);
  --color-info-border:     #BFDBFE;

  /* Overlay */
  --color-overlay:         rgba(15, 18, 24, 0.45);

  /* Terminal (categorical, mode-constant) */
  --color-terminal-bg:        #0F1218;
  --color-terminal-bg-strong: #050709;
}

/* ============================================================
   3. Semantic tokens — dark mode (flagship)
   ============================================================ */
[data-theme='dark'] {
  --color-bg:              var(--color-dark-bg);
  --color-bg-section:      var(--color-dark-panel);
  --color-surface:         var(--color-dark-panel);
  --color-surface-raised:  var(--color-dark-elevated);
  --color-surface-overlay: var(--color-dark-elevated);

  --color-text-primary:    #F5F7FA;
  --color-text-secondary:  #A1A8B3;
  --color-text-tertiary:   #6B7280;
  --color-text-inverse:    #11161D;
  --color-text-on-accent:  #11161D;

  --color-border-subtle:   #1F2937;
  --color-border:          #2A3240;
  --color-border-strong:   #475569;

  --color-success-bg:      rgba(16, 185, 129, 0.12);
  --color-success-fg:      #34D399;
  --color-success-border:  rgba(16, 185, 129, 0.30);
  --color-warning-bg:      rgba(245, 158, 11, 0.12);
  --color-warning-fg:      #FBBF24;
  --color-warning-border:  rgba(245, 158, 11, 0.30);
  --color-danger-bg:       rgba(239, 68, 68, 0.12);
  --color-danger-fg:       #F87171;
  --color-danger-border:   rgba(239, 68, 68, 0.30);
  --color-info-bg:         rgba(59, 130, 246, 0.12);
  --color-info-fg:         #60A5FA;
  --color-info-border:     rgba(59, 130, 246, 0.30);

  --color-overlay:         rgba(0, 0, 0, 0.65);
}

/* ============================================================
   4. Element defaults — base type system
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — used in marketing heroes (Inter 700/800, tight) */
.text-display-xl { font-size: var(--fs-60); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.text-display-lg { font-size: var(--fs-48); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.text-display-md { font-size: var(--fs-36); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }

/* Product headings — 600 max for product chrome */
h1, .text-h1 { font-size: var(--fs-30); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); margin: 0; }
h2, .text-h2 { font-size: var(--fs-24); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); margin: 0; }
h3, .text-h3 { font-size: var(--fs-20); font-weight: 600; line-height: var(--lh-snug); margin: 0; }
h4, .text-h4 { font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-snug); margin: 0; }
h5, .text-h5 { font-size: var(--fs-14); font-weight: 600; line-height: var(--lh-snug); margin: 0; }

/* Body & supporting */
.text-body-lg    { font-size: var(--fs-18); line-height: var(--lh-relaxed); }
.text-body       { font-size: var(--fs-15); line-height: var(--lh-normal); }
.text-body-sm    { font-size: var(--fs-13); line-height: var(--lh-normal); }
.text-caption    { font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--color-text-secondary); }
.text-eyebrow    { font-size: var(--fs-12); font-weight: 600; line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-text-secondary); }
.text-mono       { font-family: var(--font-mono); font-size: var(--fs-13); }

/* Text color utilities */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-accent    { color: var(--color-accent); }

/* ============================================================
   5. Reset + helpers for design-system preview cards
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font-family: inherit; }