/* Timbro GPS — Foundations
   Inspired by Timeero (timeero.com): orange brand + indigo accent on a soft off-white background.
*/

:root {
  /* ── BRAND ─────────────────────────────────────────────── */
  --brand-500: #ee7038;        /* primary brand orange */
  --brand-600: #d65c25;        /* hover / pressed */
  --brand-100: #fff3e6;        /* tinted backgrounds */
  --brand-50:  #fff8f1;

  --accent-500: #4852af;       /* indigo accent */
  --accent-700: #2a2e5a;       /* deep indigo headings/banners */
  --accent-100: #f1f2f9;       /* very light indigo wash */

  /* ── NEUTRALS ──────────────────────────────────────────── */
  --bg:        #f7f8fc;        /* page background */
  --surface:   #ffffff;
  --surface-2: #fafbfe;
  --border:    #e5e7ef;        /* card borders */
  --border-strong: #d6d9e3;

  /* ── TEXT ──────────────────────────────────────────────── */
  --fg:        #111111;
  --fg-1:      #1f2333;        /* headings */
  --fg-2:      #414141;        /* body */
  --fg-3:      #686868;        /* secondary */
  --fg-4:      #9aa0b0;        /* muted */
  --on-brand:  #ffffff;

  /* ── SEMANTIC ──────────────────────────────────────────── */
  --success: #1aa66b;
  --success-bg: #e6f6ee;
  --warning: #f5a524;
  --warning-bg: #fff3df;
  --danger:  #e5484d;
  --danger-bg: #fdecec;
  --info:    #4852af;

  /* ── RADII ─────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(20, 24, 50, 0.06);
  --shadow-2: 0 2px 8px rgba(20, 24, 50, 0.06), 0 1px 2px rgba(20, 24, 50, 0.04);
  --shadow-3: 0 8px 24px rgba(20, 24, 50, 0.08), 0 2px 4px rgba(20, 24, 50, 0.04);
  --shadow-pop: 0 16px 48px rgba(40, 44, 90, 0.18);

  /* ── SPACING (8pt) ─────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── TYPE FAMILIES ─────────────────────────────────────── */
  /* Display: Instrument Serif — editorial, italic-friendly, sophisticated */
  /* Sans:    Geist — modern, neutral, professional, technical */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── TYPE SCALE ────────────────────────────────────────── */
  /* Display + H1/H2 use the serif: heroic, expressive, italics for emphasis. */
  /* H3 and below use the sans for clarity — workhorse UI type. */
  --t-display:    400 72px/1.0  var(--font-display);   /* hero */
  --t-h1:         400 56px/1.05 var(--font-display);
  --t-h2:         400 40px/1.1  var(--font-display);
  --t-h3:         600 24px/1.3  var(--font-sans);
  --t-h4:         600 20px/1.35 var(--font-sans);
  --t-h5:         600 17px/1.4  var(--font-sans);
  --t-body-lg:    400 18px/1.6  var(--font-sans);
  --t-body:       400 16px/1.6  var(--font-sans);
  --t-body-sm:    400 14px/1.55 var(--font-sans);
  --t-caption:    500 13px/1.45 var(--font-sans);
  --t-overline:   500 11px/1.3  var(--font-sans);     /* used with letter-spacing .12em */

  /* ── TRANSITIONS ───────────────────────────────────────── */
  --t-fast: 150ms cubic-bezier(.2,.7,.2,1);
  --t-base: 220ms cubic-bezier(.2,.7,.2,1);
}

/* ── SEMANTIC ELEMENTS ─────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font: var(--t-body);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1); color: var(--fg-1); margin: 0 0 var(--s-4); letter-spacing: -0.015em; }
h2 { font: var(--t-h2); color: var(--fg-1); margin: 0 0 var(--s-4); letter-spacing: -0.01em; }
h3 { font: var(--t-h3); color: var(--fg-1); margin: 0 0 var(--s-3); letter-spacing: -0.015em; }
h4 { font: var(--t-h4); color: var(--fg-1); margin: 0 0 var(--s-2); letter-spacing: -0.01em; }
h5 { font: var(--t-h5); color: var(--fg-1); margin: 0 0 var(--s-2); }
p  { font: var(--t-body); color: var(--fg-2); margin: 0 0 var(--s-3); }
small, .caption { font: var(--t-caption); color: var(--fg-3); }
code { font-family: var(--font-mono); font-size: .9em; background: var(--accent-100); padding: 2px 6px; border-radius: var(--r-xs); }
a { color: var(--accent-500); text-decoration: none; font-weight: 500; transition: color var(--t-fast); }
a:hover { color: var(--brand-500); }

::selection { background: var(--brand-100); color: var(--accent-700); }