/* =========================================================================
   Centinel Design System — Foundations
   Colors, type, spacing, radius, shadow.
   Pull this in via:  <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

/* Geist + Geist Mono (Google Fonts).
   ⚠️ Substitution: live site may use a different licensed face. Replace this
   import + font-family stack if/when font files are provided. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ----- Brand color tokens ----- */

  /* Foreground / ink */
  --ink-900: #0F0F0F;     /* near-black, dark mode ground */
  --ink-800: #161616;     /* logo & primary ink in light mode */
  --ink-700: #1A1B1E;     /* slate, dark mode card surface */
  --ink-600: #2A2B2F;     /* secondary surface */
  --ink-500: #4A4D55;     /* muted text on dark */
  --ink-400: #6B6E76;     /* muted text on light */
  --ink-300: #9C9FA6;     /* placeholder, divider on dark */
  --ink-200: #C9CBD0;     /* divider on light */
  --ink-100: #E6E5E1;     /* hairline */
  --ink-050: #F0EEE9;     /* subtle wash */

  /* Off-white grounds (warm) */
  --paper-100: #F5F2EE;   /* primary light surface (web marketing) */
  --paper-050: #FAF8F4;   /* lightest surface */
  --paper-200: #EBE7E0;   /* recessed light surface */

  /* Earthy accents — pulled from sunset/forest photography */
  --amber-600: #C9712B;   /* sunset amber, primary accent */
  --amber-500: #E08A3F;   /* hover */
  --amber-400: #F0A968;   /* tint */
  --amber-100: #F8E4CE;   /* light fill behind amber pills */

  --pine-700: #2F4A3C;    /* deep forest */
  --pine-600: #3F6253;    /* mid forest */
  --pine-500: #5C8A77;    /* sage */
  --pine-100: #DCE8E1;    /* light pine fill */

  --teal-500: #4A9485;    /* synced / approved (subdued) */
  --teal-100: #D7E8E3;

  --fog-500: #8A95A1;     /* misty blue-gray */
  --fog-300: #B9C2CC;
  --fog-100: #E3E8EE;

  --terracotta-600: #B0553A;  /* exception, never used as bright red */
  --terracotta-100: #F2DAD0;

  /* Glass (over photography) */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.10);
  --glass-bg-dark: rgba(0, 0, 0, 0.30);
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --glass-stroke-strong: rgba(255, 255, 255, 0.18);
  --glass-blur: 20px;

  /* ----- Semantic foreground / background ----- */
  --fg-1: var(--ink-800);     /* primary ink, light mode */
  --fg-2: var(--ink-400);     /* secondary, light mode */
  --fg-3: var(--ink-300);     /* tertiary, light mode */
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: rgba(255,255,255,0.72);
  --fg-on-dark-3: rgba(255,255,255,0.50);

  --bg-1: var(--paper-100);   /* primary light ground */
  --bg-2: var(--paper-050);
  --bg-3: var(--paper-200);
  --bg-dark-1: var(--ink-900);
  --bg-dark-2: var(--ink-700);

  --accent: var(--amber-600);
  --accent-hover: var(--amber-500);

  --status-success: var(--teal-500);
  --status-success-bg: var(--teal-100);
  --status-warning: var(--amber-600);
  --status-warning-bg: var(--amber-100);
  --status-info: var(--fog-500);
  --status-info-bg: var(--fog-100);
  --status-error: var(--terracotta-600);
  --status-error-bg: var(--terracotta-100);

  --border-1: rgba(0, 0, 0, 0.06);
  --border-2: rgba(0, 0, 0, 0.10);
  --border-on-dark: rgba(255, 255, 255, 0.08);

  /* ----- Type ----- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* type scale */
  --fs-eyebrow: 11px;     /* uppercase eyebrow labels */
  --fs-caption: 12px;
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-body-lg: 17px;
  --fs-h6: 18px;
  --fs-h5: 22px;
  --fs-h4: 28px;
  --fs-h3: 36px;
  --fs-h2: 48px;
  --fs-h1: 64px;
  --fs-display: 88px;     /* deck section openers */

  /* line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* tracking */
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;     /* uppercase eyebrows */

  /* weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ----- Spacing (4px base) ----- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ----- Radius ----- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;        /* small cards, status pills, buttons */
  --r-lg: 16px;
  --r-xl: 20px;        /* large feature cards */
  --r-2xl: 24px;       /* hero cards, glass overlays */
  --r-full: 999px;     /* pills */

  /* ----- Shadow ----- */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-elev: 0 2px 4px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.10);
  --shadow-hover: 0 1px 2px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.10);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
}

/* ============================================================
   Base type styles — semantic class tokens
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Display + headings */
.t-display, h1.display {
  font: var(--w-medium) var(--fs-display)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tighter);
}
h1, .t-h1 {
  font: var(--w-medium) var(--fs-h1)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2, .t-h2 {
  font: var(--w-medium) var(--fs-h2)/var(--lh-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .t-h3 {
  font: var(--w-medium) var(--fs-h3)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h4, .t-h4 {
  font: var(--w-medium) var(--fs-h4)/var(--lh-snug) var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h5, .t-h5 {
  font: var(--w-semibold) var(--fs-h5)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h6, .t-h6 {
  font: var(--w-semibold) var(--fs-h6)/var(--lh-snug) var(--font-sans);
  margin: 0;
}

/* Body */
p, .t-body {
  font: var(--w-regular) var(--fs-body)/var(--lh-relaxed) var(--font-sans);
  color: var(--fg-1);
  margin: 0;
}
.t-body-lg {
  font: var(--w-regular) var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans);
}
.t-body-2 { color: var(--fg-2); }

.t-small {
  font: var(--w-regular) var(--fs-small)/var(--lh-normal) var(--font-sans);
  color: var(--fg-2);
}
.t-caption {
  font: var(--w-regular) var(--fs-caption)/var(--lh-normal) var(--font-sans);
  color: var(--fg-3);
}

/* Eyebrow — the brand's signature label */
.t-eyebrow {
  font: var(--w-medium) var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Mono — for numerals, financial figures, code */
.t-mono, code, kbd, .num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
}
.t-num-lg {
  font: var(--w-medium) var(--fs-h2)/1 var(--font-mono);
  letter-spacing: var(--tracking-tight);
  font-feature-settings: 'tnum', 'zero';
}
.t-num-xl {
  font: var(--w-medium) var(--fs-display)/1 var(--font-mono);
  letter-spacing: var(--tracking-tighter);
  font-feature-settings: 'tnum', 'zero';
}

/* ============================================================
   Surfaces & utilities
   ============================================================ */

.surface-paper   { background: var(--paper-100); color: var(--fg-1); }
.surface-paper-2 { background: var(--paper-050); color: var(--fg-1); }
.surface-dark    { background: var(--ink-900); color: var(--fg-on-dark-1); }
.surface-slate   { background: var(--ink-700); color: var(--fg-on-dark-1); }

/* Glass card — the signature layout primitive */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-2xl);
  color: var(--fg-on-dark-1);
}
.glass.strong {
  background: var(--glass-bg-strong);
  border-color: var(--glass-stroke-strong);
}

/* Elevated card on light ground */
.card {
  background: var(--paper-050);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-full);
  font: var(--w-medium) var(--fs-caption)/1 var(--font-sans);
  background: var(--ink-100);
  color: var(--fg-1);
}
.pill::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
}
.pill.success { background: var(--teal-100); color: var(--teal-500); }
.pill.warning { background: var(--amber-100); color: var(--amber-600); }
.pill.info    { background: var(--fog-100);  color: var(--fog-500); }
.pill.error   { background: var(--terracotta-100); color: var(--terracotta-600); }