/* ============================================================
   OEG Design System — Colors & Type
   The Operations Excellence Group · Houston, TX
   ============================================================ */

/* -- Webfonts -------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ============================================================
   1. COLOR — primitives (do not use directly in product code)
   ============================================================ */
:root {
  /* Navy — derived from logo (PNG_Cube_blue.png, ~#16224B) */
  --navy-950: #0a1230;
  --navy-900: #101a3d;
  --navy-800: #16224b;   /* CORE BRAND NAVY — from logo */
  --navy-700: #1d2c5e;
  --navy-600: #283c7a;
  --navy-500: #3a5099;
  --navy-400: #6079ba;
  --navy-300: #95a8d3;
  --navy-200: #c2cee5;
  --navy-100: #e2e8f3;
  --navy-50:  #f1f4fa;

  /* Steel — neutral grays with a faint cool cast (industrial feel) */
  --steel-950: #0d1117;
  --steel-900: #161b22;
  --steel-800: #1f242d;
  --steel-700: #2d343f;
  --steel-600: #475063;
  --steel-500: #6b7588;
  --steel-400: #939cae;
  --steel-300: #bcc3d1;
  --steel-200: #dde0e8;
  --steel-100: #eef0f4;
  --steel-50:  #f7f8fa;
  --white:     #ffffff;
  --black:     #000000;

  /* Safety Orange — sparingly used accent, evokes industrial PPE / hi-vis */
  --safety-700: #b8390a;
  --safety-600: #d94a14;
  --safety-500: #f15a24;   /* ACCENT */
  --safety-400: #f97a4d;
  --safety-300: #fca47e;
  --safety-200: #fdcdb5;
  --safety-100: #ffe8db;

  /* Status — for data viz + alerts */
  --success-700: #0f6b3e;
  --success-500: #16a35a;
  --success-100: #d6f3e1;

  --warning-700: #a16207;
  --warning-500: #ca9a04;
  --warning-100: #fdf2c8;

  --danger-700: #991b1b;
  --danger-500: #d42f2f;
  --danger-100: #fde0e0;

  --info-700: #1e3a8a;
  --info-500: #2f5fd6;
  --info-100: #d8e4ff;

  /* Data viz — categorical scale, cool→warm, accessible together */
  --viz-1: #16224b;   /* navy */
  --viz-2: #2f5fd6;   /* info blue */
  --viz-3: #16a3a3;   /* teal */
  --viz-4: #16a35a;   /* green */
  --viz-5: #ca9a04;   /* mustard */
  --viz-6: #f15a24;   /* safety orange */
  --viz-7: #a23db8;   /* plum */
  --viz-8: #6b7588;   /* steel */

  /* ============================================================
     2. COLOR — semantic tokens (USE THESE in product code)
     ============================================================ */

  /* Surfaces */
  --bg-canvas:       var(--steel-50);    /* app background */
  --bg-surface:      var(--white);       /* card / panel */
  --bg-surface-alt:  var(--steel-100);   /* striped row, subtle inset */
  --bg-sunken:       var(--steel-100);   /* well / inset */
  --bg-inverse:      var(--navy-800);    /* dark hero, marketing band */
  --bg-inverse-alt:  var(--navy-900);

  /* Foregrounds */
  --fg-1: var(--steel-900);   /* primary text */
  --fg-2: var(--steel-700);   /* secondary text */
  --fg-3: var(--steel-500);   /* tertiary / meta */
  --fg-4: var(--steel-400);   /* placeholder, disabled */
  --fg-on-inverse:     var(--white);
  --fg-on-inverse-2:   var(--navy-200);
  --fg-on-brand:       var(--white);

  /* Borders */
  --border-subtle:  var(--steel-200);
  --border-default: var(--steel-300);
  --border-strong:  var(--steel-600);
  --border-brand:   var(--navy-800);
  --border-focus:   var(--navy-500);

  /* Brand actions */
  --brand:           var(--navy-800);
  --brand-hover:     var(--navy-700);
  --brand-press:     var(--navy-900);
  --brand-soft:      var(--navy-50);
  --brand-soft-2:    var(--navy-100);

  --accent:          var(--safety-500);
  --accent-hover:    var(--safety-600);
  --accent-press:    var(--safety-700);
  --accent-soft:     var(--safety-100);

  /* Status semantics */
  --success:  var(--success-500);
  --warning:  var(--warning-500);
  --danger:   var(--danger-500);
  --info:     var(--info-500);

  /* ============================================================
     3. TYPE — primitives
     ============================================================ */
  --font-display: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Type scale — modular, 1.25 ratio at desktop */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --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;
  --fs-72: 4.5rem;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;   /* eyebrow / overline */

  /* ============================================================
     4. SPACING / RADIUS / SHADOW / MOTION
     ============================================================ */
  --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;

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  /* Shadows — crisp, slightly tinted with navy for brand cohesion */
  --shadow-xs: 0 1px 2px rgba(16, 26, 61, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 26, 61, 0.08), 0 1px 2px rgba(16, 26, 61, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 26, 61, 0.08), 0 2px 4px rgba(16, 26, 61, 0.04);
  --shadow-lg: 0 12px 28px rgba(16, 26, 61, 0.12), 0 4px 8px rgba(16, 26, 61, 0.06);
  --shadow-xl: 0 24px 48px rgba(16, 26, 61, 0.18), 0 8px 16px rgba(16, 26, 61, 0.08);
  --shadow-inset: inset 0 1px 2px rgba(16, 26, 61, 0.08);
  --shadow-focus: 0 0 0 3px rgba(58, 80, 153, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ============================================================
   5. SEMANTIC TYPE CLASSES (use these, or copy their declarations)
   ============================================================ */

.t-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(2.75rem, 5vw + 1rem, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}

.t-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: clamp(2.25rem, 3.5vw + 1rem, var(--fs-60));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent);
}

.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-meta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.t-numeric {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

/* Default element styling — applied when these tags appear without a class */
.prose h1, .prose h2, .prose h3, .prose h4, .prose p, .prose code {
  margin: 0;
}
.prose h1 { font: var(--fw-semibold) var(--fs-36)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.prose h2 { font: var(--fw-semibold) var(--fs-30)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-tight); color: var(--fg-1); }
.prose h3 { font: var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-display); color: var(--fg-1); }
.prose h4 { font: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-display); color: var(--fg-1); }
.prose p  { font: var(--fw-regular) var(--fs-16)/var(--lh-relaxed) var(--font-body); color: var(--fg-1); }
.prose code { font: var(--fw-medium) var(--fs-13)/var(--lh-normal) var(--font-mono); background: var(--steel-100); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--navy-800); }


/* ============================================================
   Dark mode — override semantic tokens
   All pages that load tokens.css get dark mode support
   ============================================================ */
body[data-theme="dark"] {
  --bg-canvas:       #0a0f1e;
  --bg-surface:      #11182e;
  --bg-surface-alt:  #1a2240;
  --bg-sunken:       #08111c;
  --fg-1:            #f2f5fb;
  --fg-2:            #b8c3d8;
  --fg-3:            #7e8aa6;
  --fg-4:            #4b5775;
  --border-subtle:   rgba(255,255,255,0.08);
  --border-default:  rgba(255,255,255,0.16);
  --border-strong:   rgba(255,255,255,0.32);
  --hairline:        1px solid rgba(255,255,255,0.08);
  --hairline-strong: 1px solid rgba(255,255,255,0.16);
  color-scheme: dark;
}