/* ============================================================================
   OKAI CENTRE OF EXCELLENCE — Design Tokens
   Colors, typography, spacing, elevation
   ============================================================================ */

/* Fonts — Brand pair locked to Hanken Grotesk / DM Mono (Google Fonts).
   Display : Hanken Grotesk (500/600) — warm humanist grotesk, confident mid-weight.
   Body    : Hanken Grotesk (400/500) — same family, one less download.
   Mono    : DM Mono — used for metrics, timestamps, technical callouts.
   Japanese: Noto Serif JP — for the 改 kanji and occasional glyphs. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

:root {
  /* ==========================================================================
     COLORS — Core
     ========================================================================== */

  /* Brand — Deep navy rooted in the logo, not the generic SaaS navy */
  --okai-ink:        #0A1830;  /* primary brand, logo background */
  --okai-ink-2:      #13213D;  /* elevated surfaces on dark */
  --okai-ink-3:      #1C2D4A;  /* borders on dark */
  --okai-ink-soft:   #243858;  /* hover on dark */

  /* Accent — Kai Vermillion. Echoes the stamp/hanko of Japanese kaizen
     tradition, while reading as confident modern-Indian (think saffron's
     industrial cousin). Used sparingly: underlines, pulls, key metrics. */
  --okai-vermillion:     #D84315;
  --okai-vermillion-600: #B8370F;
  --okai-vermillion-300: #F0A77A;
  --okai-vermillion-50:  #FDF0E8;

  /* Surface — Paper tones, not flat white. References manufacturing docs,
     blueprints, kaizen cards. */
  --okai-paper:      #FAF7F1;  /* page background */
  --okai-paper-2:    #F3EEE4;  /* subtle card bg */
  --okai-paper-3:    #E8E1D1;  /* dividers on paper */
  --okai-bone:       #FFFFFF;  /* pure surfaces */

  /* Neutrals on light */
  --okai-slate-900:  #1A1F2E;
  --okai-slate-700:  #2F3A52;
  --okai-slate-500:  #5A6478;
  --okai-slate-400:  #8A93A5;
  --okai-slate-300:  #BDC3D0;
  --okai-slate-200:  #DFE3EB;
  --okai-slate-100:  #EEF1F6;

  /* Functional — calm, industrial */
  --okai-green:      #2F7D3E;   /* compliance, pass, improvement */
  --okai-green-50:   #E8F2EA;
  --okai-amber:      #C48A0A;   /* attention, pending audit */
  --okai-amber-50:   #FBF3DC;
  --okai-crimson:    #B1392E;   /* failure, downtime */
  --okai-crimson-50: #F7E5E2;
  --okai-sky:        #1F5F8B;   /* info, link */
  --okai-sky-50:     #E3EEF5;

  /* ==========================================================================
     COLORS — Semantic
     ========================================================================== */
  --fg-1: var(--okai-ink);           /* primary text */
  --fg-2: var(--okai-slate-700);     /* secondary text */
  --fg-3: var(--okai-slate-500);     /* tertiary, captions */
  --fg-muted: var(--okai-slate-400); /* placeholder, disabled */
  --fg-inverse: var(--okai-paper);

  --bg-1: var(--okai-paper);
  --bg-2: var(--okai-paper-2);
  --bg-3: var(--okai-bone);
  --bg-inverse: var(--okai-ink);

  --border-1: var(--okai-slate-200);
  --border-2: var(--okai-paper-3);
  --border-strong: var(--okai-slate-400);

  --accent: var(--okai-vermillion);
  --accent-fg: #FFFFFF;
  --link: var(--okai-vermillion);

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-jp:      'Noto Serif JP', serif;

  /* Type scale — editorial, not SaaS */
  --text-xs:   12px;
  --text-sm:   13.5px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;
  --text-4xl:  56px;
  --text-5xl:  76px;
  --text-6xl:  104px;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.55;
  --leading-loose: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;   /* for eyebrow labels */

  /* ==========================================================================
     SPACING — 4px base
     ========================================================================== */
  --space-0: 0;
  --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;
  --space-32: 128px;

  /* ==========================================================================
     RADII — restrained. Manufacturing-industrial, not squircle-happy.
     ========================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ==========================================================================
     ELEVATION — soft, layered. No drop-shadow blur >30px.
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(10,24,48,0.06), 0 1px 1px rgba(10,24,48,0.04);
  --shadow-md: 0 4px 10px rgba(10,24,48,0.06), 0 2px 4px rgba(10,24,48,0.04);
  --shadow-lg: 0 12px 28px rgba(10,24,48,0.09), 0 4px 8px rgba(10,24,48,0.04);
  --shadow-ink: 0 12px 32px rgba(10,24,48,0.18);

  /* Inset for pressed states, fields */
  --shadow-inset: inset 0 1px 2px rgba(10,24,48,0.08);

  /* ==========================================================================
     MOTION
     ========================================================================== */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-emphatic: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;
  --duration-4: 520ms;

  /* ==========================================================================
     LAYOUT
     ========================================================================== */
  --container-narrow: 720px;
  --container-reading: 880px;
  --container-default: 1200px;
  --container-wide: 1440px;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   ============================================================================ */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
}

h1, .okai-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .okai-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
h3, .okai-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h4, .okai-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  text-transform: none;
}

p, .okai-body {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.okai-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.okai-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.okai-eyebrow--ink { color: var(--okai-ink); }
.okai-eyebrow--muted { color: var(--fg-3); }

.okai-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: 0;
}

.okai-metric {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--okai-ink);
  font-feature-settings: "tnum", "lnum";
}

.okai-metric-sm {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum", "lnum";
}

code, pre, .okai-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.okai-kanji {
  font-family: var(--font-jp);
  font-weight: 500;
}

/* Links */
a, .okai-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-2) var(--ease-standard);
}
a:hover, .okai-link:hover {
  color: var(--okai-vermillion-600);
  text-decoration-thickness: 2px;
}

/* ============================================================================
   UTILITY — background variants for sections
   ============================================================================ */
.okai-surface-paper { background: var(--bg-1); color: var(--fg-1); }
.okai-surface-card  { background: var(--bg-3); color: var(--fg-1); }
.okai-surface-ink   { background: var(--okai-ink); color: var(--okai-paper); }
.okai-surface-ink h1, .okai-surface-ink h2, .okai-surface-ink h3 { color: var(--okai-paper); }