/* ============================================================
   Dacodi Design System — Colors & Typography
   Light-first B2B. Deep blue primary, graphite neutrals,
   precise green accents. Geometric sans for UI, mono for
   technical accents (IDs, metrics, code).
   ============================================================ */

/* ---------- Fonts ---------- */
/* Primary: Inter (geometric sans) — self-hosted, no external requests */
@import url('fonts/inter.css');

/* Mono: JetBrains Mono — uploaded brand files, hosted locally */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium-Italic.woff') format('woff');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold-Italic.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraBold.woff') format('woff');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-ExtraBold-Italic.woff') format('woff');
  font-weight: 800; font-style: italic; font-display: swap;
}

:root {
  /* ========== COLOR PALETTE ========== */

  /* — Brand: Deep Blue — */
  --blue-950: #0A1628;   /* brand primary, darkest headlines, footer bg */
  --blue-900: #0F2042;
  --blue-800: #132C5E;
  --blue-700: #1A3D7C;
  --blue-600: #2456A6;
  --blue-500: #3A73C7;   /* interactive blue, links */
  --blue-400: #6B97DA;
  --blue-300: #A3BFE8;
  --blue-200: #CFDDF2;
  --blue-100: #E6EDF8;
  --blue-50:  #F3F7FC;

  /* — Neutrals: Graphite — */
  --graphite-950: #0B1016;
  --graphite-900: #141A23;
  --graphite-800: #1F2731;
  --graphite-700: #2F3946;
  --graphite-600: #475161;
  --graphite-500: #6B7687;
  --graphite-400: #909AAB;
  --graphite-300: #B8C0CD;
  --graphite-200: #D7DCE4;
  --graphite-150: #E4E8EE;
  --graphite-100: #EEF1F5;
  --graphite-50:  #F6F8FA;
  --white:        #FFFFFF;

  /* — Accent: Precise Green — */
  --green-700: #15803D;
  --green-600: #16A34A;
  --green-500: #22C55E;   /* primary accent */
  --green-400: #4ADE80;
  --green-300: #86EFAC;
  --green-100: #DCFCE7;
  --green-50:  #F0FDF4;

  /* — Semantic status — */
  --status-operational: #22C55E;
  --status-degraded:    #F59E0B;
  --status-outage:      #EF4444;
  --status-maintenance: #3A73C7;

  /* — Semantic: warn / error / info (muted, corporate) — */
  --warn-600:  #B45309;
  --warn-500:  #F59E0B;
  --warn-100:  #FEF3C7;
  --error-600: #B91C1C;
  --error-500: #EF4444;
  --error-100: #FEE2E2;
  --info-600:  #1D4ED8;
  --info-100:  #DBEAFE;

  /* ========== SEMANTIC TOKENS (Light mode) ========== */
  --bg-canvas:    var(--white);
  --bg-subtle:    var(--graphite-50);
  --bg-muted:     var(--graphite-100);
  --bg-inverse:   var(--blue-950);
  --bg-brand:     var(--blue-950);
  --bg-accent:    var(--green-500);

  --fg-1:         var(--blue-950);      /* primary text */
  --fg-2:         var(--graphite-700);  /* body text */
  --fg-3:         var(--graphite-500);  /* secondary text */
  --fg-4:         var(--graphite-400);  /* tertiary / placeholder */
  --fg-inverse:   var(--white);
  --fg-brand:     var(--blue-950);
  --fg-accent:    var(--green-600);
  --fg-link:      var(--blue-600);

  --border-1:     var(--graphite-150);  /* default */
  --border-2:     var(--graphite-200);  /* stronger */
  --border-strong:var(--graphite-300);
  --border-brand: var(--blue-950);
  --border-focus: var(--blue-500);

  /* ========== TYPOGRAPHY ========== */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — 1.200 minor third, anchored at 16px */
  --fs-12: 0.75rem;    /* 12 — micro label */
  --fs-13: 0.8125rem;  /* 13 — caption */
  --fs-14: 0.875rem;   /* 14 — small */
  --fs-15: 0.9375rem;  /* 15 — body sm */
  --fs-16: 1rem;       /* 16 — body */
  --fs-18: 1.125rem;   /* 18 — body lg */
  --fs-20: 1.25rem;    /* 20 — h5 */
  --fs-24: 1.5rem;     /* 24 — h4 */
  --fs-30: 1.875rem;   /* 30 — h3 */
  --fs-36: 2.25rem;    /* 36 — h2 */
  --fs-48: 3rem;       /* 48 — h1 */
  --fs-60: 3.75rem;    /* 60 — display */
  --fs-72: 4.5rem;     /* 72 — hero */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;  /* for all-caps labels */

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ========== SPACING (4px base) ========== */
  --sp-0:  0;
  --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;

  /* ========== RADII ========== */
  --radius-none: 0;
  --radius-sm:   4px;    /* inputs, small chips */
  --radius-md:   6px;    /* buttons */
  --radius-lg:   8px;    /* cards */
  --radius-xl:   12px;   /* hero cards */
  --radius-2xl:  16px;
  --radius-pill: 999px;

  /* ========== SHADOWS — crisp, technical, low blur ========== */
  --shadow-xs: 0 1px 0 rgba(10, 22, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06), 0 0 0 1px rgba(10, 22, 40, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(10, 22, 40, 0.08), 0 2px 4px -2px rgba(10, 22, 40, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(10, 22, 40, 0.12), 0 4px 8px -4px rgba(10, 22, 40, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(10, 22, 40, 0.16);
  --shadow-focus: 0 0 0 3px rgba(58, 115, 199, 0.28);

  /* ========== MOTION ========== */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ========== LAYOUT ========== */
  --container-max: 1200px;
  --container-pad: 32px;
}

/* ============================================================
   BASE SEMANTIC STYLES
   Use classes rather than element selectors so the system is
   opt-in inside existing markup.
   ============================================================ */

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

.ds-display,
.ds-h1, .ds-h2, .ds-h3, .ds-h4, .ds-h5 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.ds-display { font-size: var(--fs-72); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); }
.ds-h1      { font-size: var(--fs-48); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); }
.ds-h2      { font-size: var(--fs-36); line-height: var(--lh-snug); }
.ds-h3      { font-size: var(--fs-30); line-height: var(--lh-snug); }
.ds-h4      { font-size: var(--fs-24); line-height: var(--lh-snug); }
.ds-h5      { font-size: var(--fs-20); line-height: var(--lh-snug); }

.ds-body-lg { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-2); }
.ds-body    { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-2); }
.ds-body-sm { font-size: var(--fs-14); line-height: var(--lh-normal);  color: var(--fg-2); }
.ds-caption { font-size: var(--fs-13); line-height: var(--lh-normal);  color: var(--fg-3); }

.ds-eyebrow {
  font-size: var(--fs-12);
  line-height: 1.3;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.ds-mono,
.ds-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01","zero";
}

.ds-code {
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--fg-1);
}

a.ds-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
a.ds-link:hover  { border-bottom-color: currentColor; }
a.ds-link:active { color: var(--blue-700); }