/* =============================================================================
   TradesAPI Design System — Linear-inspired rebuild
   colors_and_type.css
   ============================================================================= */

/* ---------- Fonts: Inter + JetBrains Mono only ---------------------------- */
/* Inter loaded via <link> in each HTML file.
   JetBrains Mono bundled locally. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/site/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Root tokens --------------------------------------------------- */

:root {
  /* — Background ramp (Linear-style, slightly cooler than pure neutral) — */
  --bg-000: #14130f;            /* page (near-black, faint blue) */
  --bg-100: #1a1915;            /* elevated surface */
  --bg-200: #21201b;            /* surface */
  --bg-300: #2a2922;            /* hover surface */
  --bg-400: #34322b;            /* border subtle */
  --bg-500: #3f3d35;            /* border default */
  --bg-600: #4e4c42;            /* border strong */

  /* — Foreground ramp — */
  --fg-000: #ffffff;
  --fg-100: #f2efe6;            /* primary text */
  --fg-200: #b8b3a3;            /* secondary */
  --fg-300: #8a8678;            /* tertiary / labels */
  --fg-400: #625f55;            /* muted */
  --fg-500: #44423a;            /* disabled */

  /* — Accent: Linear uses a violet/indigo, but TradesAPI is infra —
     we'll use a refined indigo that reads "brand" without being Linear's exact blue. */
  --accent-500: #8a9a5b;        /* primary — olive */
  --accent-400: #a0b070;        /* hover — lighter olive */
  --accent-600: #6e7d45;        /* pressed — deeper olive */
  --accent-100: rgba(138, 154, 91, 0.14); /* tint bg */
  --accent-glow: 0 0 0 4px rgba(138, 154, 91, 0.18);

  /* — Semantic — */
  --green-500: #4cb782;
  --green-100: rgba(76, 183, 130, 0.12);
  --red-500: #eb5757;
  --red-100: rgba(235, 87, 87, 0.12);
  --amber-500: #f2c94c;
  --amber-100: rgba(242, 201, 76, 0.12);

  /* — Semantic aliases — */
  --bg-page: var(--bg-000);
  --bg-surface: var(--bg-200);
  --bg-elevated: var(--bg-300);
  --border-subtle: var(--bg-400);
  --border-default: var(--bg-500);

  /* — Type — */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Linear-style tight scale */
  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 17px;
  --t-xl: 20px;
  --t-2xl: 28px;
  --t-3xl: 36px;
  --t-4xl: 48px;
  --t-5xl: 64px;
  --t-6xl: 84px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;

  --ls-display: -0.035em;
  --ls-heading: -0.02em;
  --ls-body: -0.011em;
  --ls-eyebrow: 0.02em;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* — Spacing (4px base) — */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* — Radii — */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 999px;

  /* — Shadows (subtle — Linear uses almost none) — */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* — Motion — */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --container: 1080px;
  --container-wide: 1240px;
}

/* ---------- Base --------------------------------------------------------- */
html { font-family: var(--font-sans); background: var(--bg-page); color: var(--fg-200); font-size: var(--t-base); line-height: var(--lh-normal); font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--bg-page); color: var(--fg-200); }

/* — Headings — */
.h-display { font: var(--w-semibold) var(--t-6xl)/var(--lh-tight) var(--font-sans); letter-spacing: var(--ls-display); color: var(--fg-100); margin: 0; }
.h1 { font: var(--w-semibold) var(--t-4xl)/var(--lh-snug) var(--font-sans); letter-spacing: var(--ls-display); color: var(--fg-100); margin: 0; }
.h2 { font: var(--w-semibold) var(--t-3xl)/var(--lh-snug) var(--font-sans); letter-spacing: var(--ls-heading); color: var(--fg-100); margin: 0; }
.h3 { font: var(--w-semibold) var(--t-xl)/var(--lh-snug) var(--font-sans); letter-spacing: var(--ls-heading); color: var(--fg-100); margin: 0; }
.h4 { font: var(--w-semibold) var(--t-lg)/var(--lh-snug) var(--font-sans); color: var(--fg-100); margin: 0; }

.lead { font: var(--w-regular) var(--t-xl)/1.45 var(--font-sans); color: var(--fg-200); letter-spacing: var(--ls-body); }
.p { font: var(--w-regular) var(--t-md)/var(--lh-normal) var(--font-sans); color: var(--fg-200); letter-spacing: var(--ls-body); }
.p-sm { font: var(--w-regular) var(--t-sm)/var(--lh-normal) var(--font-sans); color: var(--fg-300); letter-spacing: var(--ls-body); }

.eyebrow { font: var(--w-medium) var(--t-sm)/1 var(--font-sans); color: var(--fg-300); letter-spacing: var(--ls-body); }

.code { font: var(--w-regular) var(--t-sm)/1.5 var(--font-mono); color: var(--fg-100); background: var(--bg-200); padding: 2px 6px; border-radius: var(--r-sm); }

a { color: var(--fg-100); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-400); }

/* — Subtle text gradient — Linear's hero treatment — */
.text-gradient {
  background: linear-gradient(180deg, var(--fg-100) 0%, rgba(244, 244, 245, 0.7) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* — Status dot, redesigned — smaller, quieter — */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-400); vertical-align: middle; }
.dot--live { background: var(--green-500); box-shadow: 0 0 0 3px var(--green-100); }
.dot--amber { background: var(--amber-500); box-shadow: 0 0 0 3px var(--amber-100); }
.dot--red { background: var(--red-500); box-shadow: 0 0 0 3px var(--red-100); }