/* ============================================================
   Kaizn Design System — Foundations
   Brand tokens (color + type) extracted from the production
   Astro app at src/styles/global.css. Use this file as the
   single source of truth for prototypes and HTML deliverables.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* ── Plus Jakarta Sans (display) ── self-hosted brand fonts */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/PlusJakartaSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/PlusJakartaSans-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/PlusJakartaSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/PlusJakartaSans-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/PlusJakartaSans-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/PlusJakartaSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/PlusJakartaSans-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 800; font-display: swap; src: url('/fonts/PlusJakartaSans-ExtraBoldItalic.ttf') format('truetype'); }

/* ── Source Serif 4 (body) ── self-hosted brand fonts */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/SourceSerif4-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/SourceSerif4-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/SourceSerif4-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/SourceSerif4-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/SourceSerif4-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/SourceSerif4-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/SourceSerif4-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 800; font-display: swap; src: url('/fonts/SourceSerif4-ExtraBoldItalic.ttf') format('truetype'); }

/* ── Fira Code (mono) ── self-hosted brand font, variable weight axis */
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/FiraCode-VariableFont_wght.ttf') format('truetype'); }

:root {
  /* ── Brand core (FIXED — do not change in dark mode) ───── */
  --kz-navy:          #022448;  /* primary, headings, dark surfaces */
  --kz-navy-dark:     #000E24;
  --kz-navy-light:    #3e5b82;
  --kz-orange:        #A8501F;  /* CTAs, links, accent — 5.2:1 as text on cream */
  --kz-orange-light:  #db8e5e;  /* decorative light stop (bars, glows) — NOT for white text */
  --kz-orange-glow:   rgba(219, 142, 94, 0.16);
  --kz-cta-grad:      linear-gradient(135deg, #A8501F, #a85f2a);  /* text-bearing CTAs: white passes ≥4.8:1 across whole surface */
  --kz-orange-solid:  #A8501F;  /* orange FILL behind white text (badges/chips) — fixed in both modes; white = 5.5:1 */
  --kz-cream-card:    #EDEBE6;  /* default service card fill */
  --kz-cream-card-hover: #E3E0DA;
  --kz-cream-icon-bg: #F5F0E8;  /* warm pad behind PNG icons */

  /* ── Semantic / message ─────────────────────────────────── */
  --kz-green:         #002B10;  /* dark success / "strengths" */
  --kz-green-light:   #A4D2A9;  /* progress fill */
  --kz-red:           #BA1A1A;  /* destructive */

  /* ── Surfaces (warm cream hierarchy, light mode) ────────── */
  --kz-surface-lowest:   #FFFFFF;
  --kz-surface:          #FAF9F5;
  --kz-surface-low:      #F8F3EA;
  --kz-surface-container:#F3F1EC;
  --kz-surface-high:     #ECE8DF;
  --kz-surface-highest:  #E7E2D9;
  --kz-navy-bg:          #022448; /* navy "featured" card fill */

  /* ── Text ───────────────────────────────────────────────── */
  --kz-on-surface:        #1D1C16; /* body text on cream */
  --kz-on-surface-variant:#43474E; /* muted text */
  --kz-on-navy:           #FFFFFF;
  --kz-on-navy-variant:   rgba(255, 255, 255, 0.72);
  /* Text that sits on a --kz-navy fill. Light mode: navy is dark → white.
     Dark mode: --kz-navy flips light → this flips to dark ink (see .dark). */
  --kz-on-navy-flip:      #FFFFFF;

  /* ── Glass / overlay ────────────────────────────────────── */
  --kz-glass-bg:     rgba(255, 255, 255, 0.7);
  --kz-glass-border: rgba(255, 255, 255, 0.3);

  /* ── Hero gradient (navy, used behind dark wordmark) ────── */
  --kz-hero-gradient: linear-gradient(135deg, #022448 0%, #3e5b82 100%); /* @kind color */
  --kz-hero-fade:     rgba(254, 249, 240, 0.4);

  /* ── Typography ─────────────────────────────────────────── */
  --kz-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kz-font-body:    'Source Serif 4', Georgia, serif;
  --kz-font-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale — display (Plus Jakarta Sans) */
  --kz-text-hero:   4.25rem;  /* 68px, weight 800, tracking -0.02em */
  --kz-text-h1:     2rem;     /* 32px, weight 800 */
  --kz-text-h2:     1.5rem;   /* 24px, weight 800 */
  --kz-text-h3:     1.125rem; /* 18px, weight 700 */
  --kz-text-eyebrow:0.6875rem;/* 11px, weight 700, uppercase, 0.2em tracking, orange */
  --kz-text-label:  0.875rem; /* 14px, weight 600 */
  --kz-text-button: 0.875rem; /* 14px, weight 600 */
  --kz-text-nav:    0.9375rem;/* 15px, weight 500/700 active */

  /* Type scale — body (Source Serif 4) */
  --kz-text-lead:   1.25rem;  /* 20px hero subtitle */
  --kz-text-body:   1rem;     /* 16px paragraph */
  --kz-text-meta:   0.875rem; /* 14px secondary */
  --kz-text-caption:0.75rem;  /* 12px tertiary */

  /* Italic accent — body family italic at display sizes for hero
     phrases like "let's build." */
  --kz-italic-accent: italic 400 1em var(--kz-font-body);

  /* ── Radii (never pill-shaped) ──────────────────────────── */
  --kz-radius-sm:  4px;
  --kz-radius-md:  8px;
  --kz-radius-lg:  12px;
  --kz-radius-pill:999px; /* badges/progress only — NOT buttons */

  /* ── Shadows (warm-tinted, layered) ─────────────────────── */
  --kz-shadow-sm: 0 4px 12px -4px rgba(29, 28, 22, 0.06);
  --kz-shadow-md: 0 20px 40px -12px rgba(29, 28, 22, 0.08);
  --kz-shadow-lg: 0 40px 80px -20px rgba(29, 28, 22, 0.12);
  --kz-shadow-orange:0 24px 48px -12px rgba(184, 90, 40, 0.35);
  --kz-shadow-green: 0 20px 40px -12px rgba(0, 43, 16, 0.30);

  /* ── Spacing scale (rem) ────────────────────────────────── */
  --kz-space-1: 0.25rem;
  --kz-space-2: 0.5rem;
  --kz-space-3: 0.75rem;
  --kz-space-4: 1rem;
  --kz-space-5: 1.25rem;
  --kz-space-6: 1.5rem;
  --kz-space-8: 2rem;
  --kz-space-10:2.5rem;
  --kz-space-12:3rem;
  --kz-space-16:4rem;
}

/* ── Dark mode overrides (apply to .dark scope) ───────────── */
.dark {
  --kz-navy:          #EAF0F8; /* "navy" label flips for legibility */
  --kz-navy-light:    #A0BCD8;
  --kz-navy-bg:       #1A3A5C;
  --kz-orange:        #E8844A;
  --kz-orange-light:  #db8e5e;
  --kz-orange-glow:   rgba(219, 142, 94, 0.18);
  /* Dark mode keeps a warm orange CTA gradient; white passes ≥4.8:1 across it. */
  --kz-cta-grad:      linear-gradient(135deg, #A8501F, #a85f2a);
  /* --kz-navy flips light below, so on-navy text flips to dark ink. */
  --kz-on-navy-flip:  #0B1520;
  --kz-green:         #7CC98A;
  --kz-green-light:   #B8E0BE;

  --kz-surface-lowest:   #0B1520;
  --kz-surface:          #101D2C;
  --kz-surface-low:      #162537;
  --kz-surface-container:#1C2D42;
  --kz-surface-high:     #23364D;
  --kz-surface-highest:  #2A3F58;

  --kz-on-surface:        #F0EDE5;
  --kz-on-surface-variant:#B8BCC4;

  --kz-cream-card:       #1C2D42; /* matches surface-container — was #EDEBE6 */
  --kz-cream-card-hover: #23364D; /* matches surface-high */
  --kz-cream-icon-bg:    #1C2D42; /* dark pad behind icons */

  --kz-glass-bg:     rgba(16, 29, 44, 0.75);
  --kz-glass-border: rgba(255, 255, 255, 0.08);
  --kz-hero-fade:    rgba(16, 29, 44, 0.6);

  --kz-shadow-sm: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
  --kz-shadow-md: 0 20px 40px -12px rgba(0, 0, 0, 0.4);
  --kz-shadow-lg: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
}

/* ── Element-level defaults (drop-in for prototypes) ─────── */
body {
  font-family: var(--kz-font-body);
  background: var(--kz-surface);
  color: var(--kz-on-surface);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--kz-font-display); color: var(--kz-navy); margin: 0; letter-spacing: -0.02em; }
h1 { font-size: var(--kz-text-h1);     font-weight: 800; }
h2 { font-size: var(--kz-text-h2);     font-weight: 800; }
h3 { font-size: var(--kz-text-h3);     font-weight: 700; }
p  { font-family: var(--kz-font-body); font-size: var(--kz-text-body); line-height: 1.6; color: var(--kz-on-surface-variant); margin: 0; }
a  { color: var(--kz-orange); text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: 0.8; }
code, pre { font-family: var(--kz-font-mono); background: var(--kz-surface-container); color: var(--kz-navy); border-radius: var(--kz-radius-sm); }

/* Eyebrow — used above titles, ALWAYS uppercase + orange */
.kz-eyebrow {
  font-family: var(--kz-font-display);
  font-size: var(--kz-text-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--kz-orange);
}

/* Italic display accent — body family at display sizes */
.kz-accent {
  font-family: var(--kz-font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--kz-orange);
}

/* Iconography — brand icon chip (warm pad behind PNGs) */
.kz-brand-icon {
  width: 24px; height: 24px;
  object-fit: contain;
  background: var(--kz-cream-icon-bg);
  padding: 2px;
  border-radius: var(--kz-radius-sm);
  vertical-align: middle;
}
.kz-brand-icon-sm { width: 20px; height: 20px; padding: 2px; }
.kz-brand-icon-lg { width: 40px; height: 40px; padding: 4px; }
.kz-brand-icon-xl { width: 48px; height: 48px; padding: 5px; }

/* Glass surface — pervasive across cards, sidebars, modals */
.kz-glass {
  background: var(--kz-glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--kz-glass-border);
  border-radius: var(--kz-radius-lg);
  box-shadow: var(--kz-shadow-md);
}

/* CTA: solid navy (NEVER pill) */
.kz-btn {
  display: inline-flex; align-items: center; gap: var(--kz-space-3);
  padding: 0.75rem 1.25rem;
  background: var(--kz-navy-bg);
  color: var(--kz-on-navy);
  border: none;
  border-radius: var(--kz-radius-sm);
  font-family: var(--kz-font-display);
  font-size: var(--kz-text-button);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.kz-btn:hover { opacity: 0.9; }

.kz-btn-outline {
  background: transparent;
  color: var(--kz-navy);
  border: 1px solid var(--kz-navy);
}
.kz-btn-outline:hover { background: var(--kz-cream-card); }

/* Orange-gradient CTA (saved for the highest-emphasis moments).
   Uses --kz-cta-grad so white text passes ≥4.8:1 across the whole surface. */
.kz-btn-cta {
  background: var(--kz-cta-grad);
  color: white;
}