/* =========================================================================
   Dependable Logistics — Design Tokens
   Single source of truth for color, type, spacing, radii, shadow.
   Import this file at the top of any stylesheet:
     @import url("colors_and_type.css");
   ========================================================================= */

/* ---- Fonts ----
   Loaded from Google Fonts as a substitution for any brand fonts not yet
   supplied. If/when real brand fonts arrive, drop the .ttf files into
   /fonts and replace this @import with @font-face declarations.
   --------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ====== Color — brand ====== */
  --navy: #1B2A4A;             /* primary */
  --navy-90: #2C3A57;
  --navy-70: #4F5B73;
  --navy-50: #8A92A4;
  --navy-30: #BFC4CF;
  --navy-12: rgba(27, 42, 74, 0.12);
  --navy-08: rgba(27, 42, 74, 0.08);

  --orange: #FF6B2B;           /* accent / CTA */
  --orange-hover: #F25D1F;     /* -6% */
  --orange-press: #DB5418;     /* -12% */
  --orange-soft: #FFE6D9;      /* badge fill */

  --ink: #1A1A2E;              /* body text */
  --ink-70: rgba(26, 26, 46, 0.70);
  --ink-50: rgba(26, 26, 46, 0.50);

  --white: #FFFFFF;
  --gray-50: #F5F7FA;          /* page band fill, card fill on white */
  --gray-100: #E8ECF3;         /* press state on secondary */
  --gray-200: #D6DCE6;
  --hairline: rgba(27, 42, 74, 0.12);

  /* ====== Color — semantic (data only) ====== */
  --good: #1F7A3E;             /* placed, paid */
  --good-soft: #DDF0E3;
  --warn: #C97A0A;             /* pending */
  --warn-soft: #FBEAD0;
  --bad:  #B3261E;             /* declined, expired */
  --bad-soft: #F8DAD7;

  /* ====== Background tokens ====== */
  --bg-page: var(--white);
  --bg-band: var(--gray-50);
  --bg-inverse: var(--navy);

  /* ====== Foreground tokens ====== */
  --fg-1: var(--ink);          /* primary body */
  --fg-2: var(--ink-70);       /* secondary */
  --fg-3: var(--ink-50);       /* tertiary, captions */
  --fg-inverse: var(--white);
  --fg-accent: var(--orange);

  /* ====== Type — families ====== */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ====== Type — scale (mobile-first, 375px base) ====== */
  --text-display: 40px;  --lh-display: 44px;
  --text-h1: 30px;       --lh-h1: 36px;
  --text-h2: 22px;       --lh-h2: 28px;
  --text-h3: 18px;       --lh-h3: 24px;
  --text-body: 16px;     --lh-body: 24px;
  --text-small: 14px;    --lh-small: 20px;
  --text-micro: 12px;    --lh-micro: 16px;

  /* ====== Type — weights ====== */
  --w-regular: 400;   /* @kind font */
  --w-medium: 500;    /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold: 700;      /* @kind font */
  --w-black: 800;     /* @kind font */

  /* ====== Tracking ====== */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-caps: 0.06em;

  /* ====== Spacing — 4px grid ====== */
  --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-14: 56px;
  --space-20: 80px;

  /* ====== Radii ====== */
  --radius-sm: 4px;            /* inputs, small badges */
  --radius-md: 8px;             /* buttons, cards */
  --radius-pill: 999px;         /* trust pills, click-to-call */

  /* ====== Shadow — two levels only ====== */
  --shadow-1: 0 1px 2px rgba(27, 42, 74, 0.08);
  --shadow-2: 0 6px 16px rgba(27, 42, 74, 0.12);

  /* ====== Motion ====== */
  --dur-quick: 120ms;   /* @kind other */
  --dur-base: 180ms;    /* @kind other */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);   /* @kind other */

  /* ====== Layout ====== */
  --container-page: 1200px;
  --container-prose: 720px;
  --container-grid: 1080px;
  --header-h-mobile: 56px;
  --header-h-desktop: 72px;
  --sticky-bar-h: 64px;
}

/* ========================================================================
   Semantic typography classes
   Use these instead of raw token vars when possible.
   ======================================================================== */
.t-display {
  font-family: var(--font-sans);
  font-weight: var(--w-black);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}
.t-small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}
.t-micro-caps {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ========================================================================
   Base reset (opinionated, minimal)
   ======================================================================== */
.dl-reset *,
.dl-reset *::before,
.dl-reset *::after { box-sizing: border-box; }

.dl-reset {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.dl-reset h1, .dl-reset h2, .dl-reset h3, .dl-reset h4,
.dl-reset p, .dl-reset ul, .dl-reset ol, .dl-reset figure { margin: 0; }
.dl-reset a { color: inherit; text-decoration: none; }
.dl-reset button { font: inherit; }