/* =============================================================================
   Tradeo Design System — Colors & Type (Light Mode)
   Source: studiodeia/tradeo client/src/index.css (v5.0 "Navy & Territory")
   Primary hue: 222 (rich navy). 4px base grid. Satoshi + IBM Plex Mono.
   ============================================================================= */

/* ── Self-hosted fonts ─────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('./fonts/satoshi-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('./fonts/satoshi-variable-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/outfit-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
}

:root {
  /* ── Type families ──────────────────────────────────────────────────────── */
  --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Satoshi', system-ui, sans-serif; /* splash/marketing only */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  /* Pure white is never used as a surface. Cards & popovers sit a half-step
     above the page bg with a warm-neutral off-white. */
  --background: hsl(228 22% 97%);   /* page bg — warm off-white */
  --card:       hsl(228 22% 99%);   /* card — slightly lighter than bg, never #fff */
  --popover:    hsl(228 22% 99%);
  --sidebar:    hsl(228 22% 99%);

  /* ── Text tokens ────────────────────────────────────────────────────────── */
  --fg-1: hsl(221 39% 11%);   /* text-primary — headlines, body */
  --fg-2: hsl(220 12% 35%);   /* text-secondary — sub-text */
  --fg-3: hsl(220 8% 46%);    /* text-muted — captions, labels */
  --fg-4: hsl(220 8% 62%);    /* text-placeholder */

  /* ── Primary scale — Rich Navy (hue 222) ────────────────────────────────── */
  --primary-50:  hsl(222 55% 96%);
  --primary-100: hsl(222 55% 91%);
  --primary-200: hsl(222 52% 82%);
  --primary-300: hsl(222 55% 68%);
  --primary-400: hsl(222 60% 52%);  /* default interactive — buttons, links */
  --primary-500: hsl(222 65% 35%);
  --primary-600: hsl(222 68% 28%);
  --primary-700: hsl(222 72% 22%);
  --primary-800: hsl(222 75% 16%);
  --primary-900: hsl(222 78% 10%);  /* logo black "#0C1222" */
  --primary: var(--primary-400);
  --primary-fg: hsl(0 0% 100%);

  /* ── Neutrals / chrome ─────────────────────────────────────────────────── */
  --secondary: hsl(220 10% 95%);
  --secondary-fg: hsl(222 14% 22%);
  --muted: hsl(220 10% 95.5%);
  --muted-fg: hsl(220 8% 42%);
  --accent: hsl(220 10% 94%);
  --accent-fg: hsl(222 14% 22%);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border: hsl(220 10% 88%);
  --border-subtle: hsl(228 22% 94%);
  --border-strong: hsl(220 14% 81%);
  --input: hsl(220 10% 89%);
  --ring: hsl(222 60% 52%);

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --success: hsl(160 84% 39%);
  --success-bg: hsl(152 81% 96%);
  --success-text: hsl(162 83% 31%);
  --warning: hsl(32 95% 44%);
  --warning-bg: hsl(48 96% 89%);
  --warning-text: hsl(28 80% 36%);
  --error: hsl(0 72% 51%);
  --error-bg: hsl(0 86% 97%);
  --error-text: hsl(0 63% 42%);
  --info: hsl(217 91% 60%);
  --info-bg: hsl(214 100% 97%);
  --info-text: hsl(224 76% 48%);

  /* ── Tier (loyalty/category badges) ────────────────────────────────────── */
  --tier-gold: hsl(45 93% 47%);
  --tier-gold-bg: hsl(55 97% 88%);
  --tier-silver: hsl(240 4% 46%);
  --tier-silver-bg: hsl(240 5% 96%);
  --tier-bronze: hsl(32 90% 33%);
  --tier-bronze-bg: hsl(48 96% 89%);

  /* ── Charts ────────────────────────────────────────────────────────────── */
  --chart-1: hsl(222 60% 52%);   /* navy */
  --chart-2: hsl(160 84% 39%);   /* emerald */
  --chart-3: hsl(32 95% 44%);    /* amber */
  --chart-4: hsl(272 52% 52%);   /* violet */
  --chart-5: hsl(348 64% 52%);   /* rose */

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius: 0.5rem;            /* 8px — base */
  --radius-sm: 0.25rem;        /* 4px */
  --radius-md: 0.375rem;       /* 6px */
  --radius-lg: 0.5rem;         /* 8px — cards */
  --radius-xl: 0.75rem;        /* 12px — primary cards */
  --radius-2xl: 1rem;          /* 16px — hero/feature cards */
  --radius-full: 9999px;

  /* ── Spacing scale (4px base) ──────────────────────────────────────────── */
  --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-12: 48px;
  --space-16: 64px;

  /* ── Shadows — navy-tinted ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(12, 18, 34, 0.03);
  --shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.04);
  --shadow-md: 0 1px 3px rgba(12, 18, 34, 0.06), 0 1px 2px rgba(12, 18, 34, 0.03);
  --shadow-lg: 0 4px 12px rgba(12, 18, 34, 0.08);
  --shadow-xl: 0 8px 24px rgba(12, 18, 34, 0.10);
  --shadow-2xl: 0 20px 40px rgba(12, 18, 34, 0.14);
  --shadow-card: 0 1px 2px rgba(12, 18, 34, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(12, 18, 34, 0.08);
  --shadow-ring-primary: 0 0 0 3px hsl(222 60% 52% / 0.12);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-instant: 80ms;
  --duration-fast:    120ms;
  --duration-normal:  180ms;
  --duration-slow:    300ms;

  /* ── Typography utility scale (tuned for Satoshi) ──────────────────────── */
  --type-display:  700 36px/1.1   var(--font-sans);  /* tracking -0.035em */
  --type-h1:       700 24px/1.2   var(--font-sans);  /* tracking -0.030em */
  --type-h2:       500 18px/1.3   var(--font-sans);  /* tracking -0.020em */
  --type-h3:       500 14px/1.35  var(--font-sans);  /* tracking -0.010em */
  --type-body:     400 14px/1.5   var(--font-sans);  /* tracking -0.006em */
  --type-body-md:  500 14px/1.5   var(--font-sans);
  --type-small:    500 12px/1.4   var(--font-sans);
  --type-caption:  500 11px/1.3   var(--font-sans);  /* tracking +0.020em */
  --type-overline: 700 10px/1.2   var(--font-sans);  /* tracking +0.080em UPPER */
  --type-mono:     400 13px/1.5   var(--font-mono);
}

/* ── Semantic typography classes (drop-in for HTML) ───────────────────────── */
body { font: var(--type-body); color: var(--fg-1); background: var(--background); -webkit-font-smoothing: antialiased; }

.text-display  { font: var(--type-display);  letter-spacing: -0.035em; }
.text-h1       { font: var(--type-h1);       letter-spacing: -0.030em; }
.text-h2       { font: var(--type-h2);       letter-spacing: -0.020em; }
.text-h3       { font: var(--type-h3);       letter-spacing: -0.010em; }
.text-body     { font: var(--type-body);     letter-spacing: -0.006em; }
.text-body-md  { font: var(--type-body-md);  letter-spacing: -0.006em; }
.text-small    { font: var(--type-small); }
.text-caption  { font: var(--type-caption); }
.text-overline { font: var(--type-overline); letter-spacing: 0.08em; text-transform: uppercase; }
.text-mono     { font: var(--type-mono); }
.font-metric   { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── Element defaults ──────────────────────────────────────────────────────── */
h1 { font: var(--type-h1); letter-spacing: -0.03em; }
h2 { font: var(--type-h2); letter-spacing: -0.02em; }
h3 { font: var(--type-h3); letter-spacing: -0.01em; }
h4 { font: var(--type-h3); }
p  { font: var(--type-body); }
code, pre, kbd, samp { font: var(--type-mono); }

/* ── Focus ring ────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── Selection ─────────────────────────────────────────────────────────────── */
::selection { background: hsl(222 60% 52% / 0.12); color: var(--fg-1); }