/* =========================================================
   Kephron Design System — Colors & Type
   Source of truth for the brand's visual foundations.
   =========================================================
   Brand pillars:
     - Deep navy "engineered" surfaces
     - Warm gold accents (precision, craft, architecture)
     - Cream/parchment body sections (clarity, blueprint feel)
     - Heavy condensed display type for statement headlines
     - Soft, sans body type for clarity & calm authority
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600;700;800;900&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* -------------------- CORE PALETTE -------------------- */
  /* Lifted directly from "Colour pallette.pptx"            */
  --kephron-navy-900: #131929;   /* deepest navy / hero base */
  --kephron-navy-800: #1B2431;   /* primary dark surface     */
  --kephron-navy-700: #233246;   /* elevated surface         */
  --kephron-navy-600: #334359;   /* tertiary navy            */
  --kephron-navy-500: #344F62;   /* mid navy / dividers      */
  --kephron-navy-400: #436278;   /* steel blue / captions    */
  --kephron-navy-300: #6F8499;   /* muted text on dark       */

  --kephron-gold-700: #B89455;   /* deep gold / pressed      */
  --kephron-gold-600: #C9A464;   /* hover gold               */
  --kephron-gold-500: #DDBA72;   /* PRIMARY brand gold       */
  --kephron-gold-400: #E6C988;   /* light gold / highlights  */
  --kephron-gold-300: #F0DCAB;   /* tint / on-light accents  */

  --kephron-cream-100: #FAF8F2;  /* lightest cream           */
  --kephron-cream-200: #EFECE2;  /* primary cream surface    */
  --kephron-cream-300: #E5E0D2;  /* cream hover / divider    */
  --kephron-cream-400: #C9C3B2;  /* cream on cream caption   */

  --kephron-ink-900: #0E1320;    /* near-black for cream bg  */
  --kephron-ink-700: #2A364A;    /* body text on cream       */
  --kephron-ink-500: #5A6678;    /* secondary on cream       */

  /* -------------------- SEMANTIC TOKENS ----------------- */
  /* Dark theme (default — matches website hero/header)     */
  --bg-1: var(--kephron-navy-800);          /* page bg          */
  --bg-2: var(--kephron-navy-900);          /* deeper sections  */
  --bg-elev: var(--kephron-navy-700);       /* cards on dark    */
  --bg-cream: var(--kephron-cream-200);     /* alternating band */

  --fg-1: #FFFFFF;                          /* primary on dark  */
  --fg-2: var(--kephron-gold-500);          /* accent / heading */
  --fg-3: var(--kephron-navy-300);          /* secondary        */
  --fg-on-cream-1: var(--kephron-ink-900);
  --fg-on-cream-2: var(--kephron-ink-700);
  --fg-on-cream-3: var(--kephron-ink-500);

  --accent: var(--kephron-gold-500);
  --accent-hover: var(--kephron-gold-600);
  --accent-pressed: var(--kephron-gold-700);

  --border-subtle: rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.16);
  --border-strong: var(--kephron-gold-500);
  --border-on-cream: rgba(14,19,32,0.10);

  /* Status (used sparingly — AEC industry feel) */
  --success: #4E8C5A;
  --warning: #D89B3C;
  --danger:  #B5482E;
  --info:    var(--kephron-navy-400);

  /* -------------------- TYPE ---------------------------- */
  /* DISPLAY: Big Shoulders Display 900 — substitute for the
     heavy condensed display face seen in the website mockup
     headlines ("Embrace the future of Engineering", "Services",
     "Strategy", "Training"). The original PPTX references
     ADLaM Display + Century Gothic. Until a licensed display
     font is provided, BSD-900 carries the same architectural,
     load-bearing presence. FLAG: substitution active.        */
  --font-display: 'Big Shoulders Display', 'Archivo Black', 'Impact', sans-serif;

  /* BODY/UI: Manrope — substitute for Century Gothic which is
     not a webfont. Manrope shares the geometric, slightly soft
     proportions Century Gothic gives the wordmark and body
     copy. FLAG: substitution active.                          */
  --font-body: 'Manrope', 'Century Gothic', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --font-mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale (1.250 / major third) anchored at 16px */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

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

  /* Leading */
  --lh-tight: 0.95;
  --lh-snug: 1.1;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Tracking */
  --tr-tight: -0.02em;
  --tr-normal: 0em;
  --tr-wide: 0.04em;
  --tr-allcaps: 0.12em;

  /* -------------------- SPACING / RADII / SHADOW -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-pill: 999px;          /* CTAs — see "Embrace the future" btn */
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --radius-xs: 3px;

  /* Soft, architectural shadows. Subtle on cream; deeper on
     navy. Gold ring used for focus/selected.                 */
  --shadow-sm:  0 1px 2px rgba(14,19,32,0.08);
  --shadow-md:  0 6px 16px rgba(14,19,32,0.12);
  --shadow-lg:  0 18px 40px rgba(14,19,32,0.22);
  --shadow-glow: 0 0 0 1px rgba(221,186,114,0.45), 0 0 24px rgba(221,186,114,0.25);

  --easing-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --easing-emphasize: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
}

/* ===================== SEMANTIC ELEMENTS ===================== */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.k-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3rem, 7vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--accent);
  text-wrap: balance;
}
.k-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.25rem, 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.k-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-56);
  line-height: var(--lh-snug);
  color: inherit;
}
.k-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  color: inherit;
}
.k-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
}
.k-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  letter-spacing: var(--tr-normal);
}
.k-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-allcaps);
  text-transform: uppercase;
  color: var(--accent);
}
.k-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
.k-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.k-caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-wide);
  color: var(--fg-3);
}
.k-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
}