/* ─────────────────────────────────────────────────────────────
   Weekly Commit — Design Tokens
   Colors + Type for "Precision Naval" aesthetic
   Imported by every UI kit, slide, and asset card.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* ── BRAND / NAVY (hero color) ───────────────────────── */
  --navy-950: #060e1a;   /* Page bg, deepest layer */
  --navy-900: #0d1f35;   /* Sidebar, primary surface */
  --navy-800: #14304f;   /* Elevated cards */
  --navy-700: #1a3d63;   /* Hover surface */
  --navy-600: #1f4a7a;
  --navy-500: #255892;
  --navy-400: #2d6aaa;   /* Primary CTA bg */
  --navy-300: #4a89c8;   /* Links, icons, interactive */
  --navy-200: #7aade0;
  --navy-100: #b3d0ef;
  --navy-50:  #e8f2fb;

  /* ── STEEL BLUE (muted surfaces + text) ──────────────── */
  --steel-800: #1c3347;
  --steel-700: #243f58;
  --steel-600: #2d4f6e;
  --steel-500: #3d6585;  /* Placeholder, disabled */
  --steel-400: #527b9b;
  --steel-300: #7299b5;  /* Secondary body text */
  --steel-200: #9bbdd0;
  --steel-100: #c6dce9;
  --steel-50:  #eaf3f9;

  /* ── SEMANTIC ────────────────────────────────────────── */
  --success-500: #10b981;
  --success-400: #34d399;
  --success-100: #d1fae5;
  --warning-500: #f59e0b;
  --warning-100: #fef3c7;
  --error-500:   #ef4444;
  --error-400:   #f87171;
  --error-100:   #fee2e2;
  --info-500:    #3b82f6;
  --info-400:    #60a5fa;
  --info-300:    #93c5fd;

  /* ── NEUTRALS ────────────────────────────────────────── */
  --white: #ffffff;
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* ── SEMANTIC FG / BG ROLES ──────────────────────────── */
  --bg-page:        var(--navy-950);
  --bg-surface:     var(--navy-900);
  --bg-elevated:    var(--navy-800);
  --bg-hover:       rgba(255,255,255,0.04);
  --bg-glass:       rgba(255,255,255,0.04);

  --fg-1:           var(--white);        /* primary text */
  --fg-2:           var(--steel-100);    /* body text */
  --fg-3:           var(--steel-300);    /* secondary body */
  --fg-4:           var(--steel-400);    /* muted / captions */
  --fg-5:           var(--steel-500);    /* placeholder / disabled */
  --fg-link:        var(--navy-300);
  --fg-link-hover:  var(--navy-200);

  --border-subtle:  rgba(255,255,255,0.07);
  --border-default: rgba(255,255,255,0.12);
  --border-strong:  rgba(255,255,255,0.25);
  --border-focus:   var(--navy-300);

  /* ── TYPE FAMILIES ───────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, monospace;

  /* ── RADII ───────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;    /* inputs */
  --radius-lg:   12px;   /* media */
  --radius-xl:   16px;   /* cards, modals */
  --radius-2xl:  24px;
  --radius-pill: 100px;  /* buttons, badges */

  /* ── SPACING (4px base) ──────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;

  /* ── ELEVATION ───────────────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.55);

  /* ── MOTION ──────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* ── TYPE TOKENS (size · weight · lh · tracking) ─────── */
  --t-hero-display-size: 52px;
  --t-hero-display-weight: 800;
  --t-hero-display-lh: 1.06;
  --t-hero-display-tracking: -0.03em;

  --t-display-size: 40px;
  --t-display-weight: 700;
  --t-display-lh: 1.1;
  --t-display-tracking: -0.025em;

  --t-h1-size: 30px;   /* heading-lg */
  --t-h1-weight: 700;
  --t-h1-lh: 1.2;
  --t-h1-tracking: -0.02em;

  --t-h2-size: 22px;   /* heading-md */
  --t-h2-weight: 600;
  --t-h2-lh: 1.3;

  --t-h3-size: 17px;   /* heading-sm */
  --t-h3-weight: 600;
  --t-h3-lh: 1.4;

  --t-subtitle-size: 17px;
  --t-subtitle-weight: 500;
  --t-subtitle-lh: 1.5;

  --t-body-size: 15px;
  --t-body-weight: 400;
  --t-body-lh: 1.65;

  --t-body-sm-size: 13px;
  --t-body-sm-lh: 1.55;

  --t-label-size: 11px;
  --t-label-tracking: 0.1em;

  --t-caption-size: 12px;
}

/* ─────────────────────────────────────────────────────────────
   Semantic Type Classes — use these instead of raw sizes
   ───────────────────────────────────────────────────────────── */

.t-hero-display {
  font-family: var(--font-display);
  font-size: var(--t-hero-display-size);
  font-weight: var(--t-hero-display-weight);
  line-height: var(--t-hero-display-lh);
  letter-spacing: var(--t-hero-display-tracking);
  color: var(--fg-1);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-tracking);
  color: var(--fg-1);
}
.t-h1, .t-heading-lg {
  font-family: var(--font-display);
  font-size: var(--t-h1-size);
  font-weight: var(--t-h1-weight);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-tracking);
  color: var(--fg-1);
}
.t-h2, .t-heading-md {
  font-family: var(--font-display);
  font-size: var(--t-h2-size);
  font-weight: var(--t-h2-weight);
  line-height: var(--t-h2-lh);
  color: var(--fg-1);
}
.t-h3, .t-heading-sm {
  font-family: var(--font-display);
  font-size: var(--t-h3-size);
  font-weight: var(--t-h3-weight);
  line-height: var(--t-h3-lh);
  color: var(--fg-1);
}
.t-subtitle {
  font-family: var(--font-body);
  font-size: var(--t-subtitle-size);
  font-weight: var(--t-subtitle-weight);
  line-height: var(--t-subtitle-lh);
  color: var(--steel-200);
}
.t-body, .t-p {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--t-body-sm-size);
  font-weight: 400;
  line-height: var(--t-body-sm-lh);
  color: var(--fg-3);
}
.t-label {
  font-family: var(--font-mono);
  font-size: var(--t-label-size);
  font-weight: 400;
  letter-spacing: var(--t-label-tracking);
  text-transform: uppercase;
  color: var(--fg-4);
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption-size);
  color: var(--fg-5);
  line-height: 1.4;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--navy-200);
}
.t-code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--navy-200);
}