/* ==========================================================================
   Towbook / Flatbed — Colors & Type Foundations
   Source of truth: towbook/flatbed @ master
     - packages/core/src/style/colors.css
     - packages/core/src/style/brand-override.css
     - packages/core/src/style/tailwind.css
   The full system uses the complete Radix Colors scales (24 hues × 12 steps,
   each with solid + alpha + light/dark variants). This file ships the brand
   colors, the neutral (slate) scale, the semantic tokens that product code
   actually consumes (--foreground, --background, --primary, etc.), and the
   typography scale.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */
/* Inter Variable — Towbook primary typeface, shipped with the design system. */
@font-face {
  font-family: "InterVar";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2-variations"),
       url("fonts/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "InterVar";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2-variations"),
       url("fonts/InterVariable-Italic.woff2") format("woff2");
}

/* ---------- Base tokens ------------------------------------------------- */
:root {
  /* Brand --------------------------------------------------------------- */
  --brand-blue:  hsl(215.05 100% 41.96%);   /* #0059D6 — logo + primary CTA */
  --brand-amber: hsl(39 100% 57%);          /* Accent / highlight */
  --black: hsl(0 0% 0%);
  --white: hsl(0 0% 100%);
  --transparent: hsla(0 0% 0% / 0);

  /* Blue scale (brand-tuned: steps 8–11 are overridden from Radix) */
  --blue-1:  #fbfdff;
  --blue-2:  #f4faff;
  --blue-3:  #e6f4fe;
  --blue-4:  #d5efff;
  --blue-5:  #c2e5ff;
  --blue-6:  #acd8fc;
  --blue-7:  #8ec8f6;
  --blue-8:  #5dabef;   /* brand override */
  --blue-9:  #0a8dff;   /* brand override — hover primary */
  --blue-10: #0771f2;   /* brand override — primary CTA */
  --blue-11: #0059d6;   /* brand override — brand blue / wordmark */
  --blue-12: #113264;

  --blue-a2: #0080ff0b;
  --blue-a3: #008cff19;
  --blue-a4: #008ff72a;
  --blue-a5: #008ff23d;
  --blue-a6: #0086e053;
  --blue-a7: #0081d671;
  --blue-a8: #007ae5a1;
  --blue-a9: #0a8dff;
  --blue-a10: #006ef5fa;
  --blue-a11: #0057d1fa;

  /* Slate neutral scale (primary grayscale) */
  --slate-1:  #fcfcfd;
  --slate-2:  #f9f9fb;
  --slate-3:  #eff0f3;
  --slate-4:  #e7e8ec;
  --slate-5:  #e0e1e6;
  --slate-6:  #d8d9e0;
  --slate-7:  #cdced7;
  --slate-8:  #b9bbc6;
  --slate-9:  #8b8d98;
  --slate-10: #80828d;
  --slate-11: #62636c;
  --slate-12: #1e1f24;

  --slate-a1: #00005503;
  --slate-a2: #00005506;
  --slate-a3: #00104010;
  --slate-a4: #000b3618;
  --slate-a5: #0009321f;
  --slate-a6: #00073527;
  --slate-a7: #00063332;
  --slate-a8: #00083046;
  --slate-a9: #00051d74;
  --slate-a10: #00041b7f;
  --slate-a11: #0002119d;
  --slate-a12: #000107e1;

  /* Red / destructive */
  --red-1: #fffcfc;  --red-2: #fff7f7;  --red-3: #feebec;  --red-4: #ffdbdc;
  --red-5: #ffcdce;  --red-6: #fdbdbe;  --red-7: #f4a9aa;  --red-8: #eb8e90;
  --red-9: #e5484d;  --red-10: #dc3e42; --red-11: #ce2c31; --red-12: #641723;
  --red-a3: #f3000d14; --red-a4: #ff000024; --red-a6: #e2000842;
  --red-a9: #db0007b7; --red-a11: #c50007d3;

  /* Green / success */
  --green-1: #fbfefc;  --green-2: #f4fbf6;  --green-3: #e6f6eb;  --green-4: #d6f1df;
  --green-5: #c4e8d1;  --green-6: #adddc0;  --green-7: #8eceaa; --green-8: #5bb98b;
  --green-9: #30a46c;  --green-10: #2b9a66; --green-11: #218358; --green-12: #193b2d;
  --green-a3: #00992619; --green-a9: #008f4abf; --green-a11: #006c3ade;

  /* Amber (brand accent scale — warnings) */
  --amber-1: #fefdfb;  --amber-2: #fefbe9;  --amber-3: #fff7c2;  --amber-4: #ffee9c;
  --amber-5: #fbe577;  --amber-6: #f3d673;  --amber-7: #e9c162;  --amber-8: #e2a336;
  --amber-9: #ffb224;  --amber-10: #ffa01c; --amber-11: #ad5700; --amber-12: #4f3422;
  --amber-a3: #ffdc003d; --amber-a9: #ffa700db; --amber-a11: #ad5700;

  /* ------- Elevation / shadow system -------------------------------- */
  --shadow-xs: 0 1px 2px 0 var(--slate-a2);
  --shadow-sm: 0 1px 3px 0 var(--slate-a2), 0 1px 2px -1px var(--slate-a3);
  --shadow-md: 0 4px 6px -1px var(--slate-a3), 0 2px 4px -2px var(--slate-a3);
  --shadow-lg: 0 10px 15px -3px var(--slate-a3), 0 4px 6px -4px var(--slate-a4);
  --shadow-soft:
    0 0 0 1px var(--slate-a2),
    0 4px 8px -4px var(--slate-a3),
    0 8px 16px -8px var(--slate-a5),
    0 32px 64px -32px var(--slate-a4);
  --shadow-soft-sm:
    0 0 0 1px var(--slate-a2),
    0 4px 8px -4px var(--slate-a3),
    0 6px 12px -6px var(--slate-a4);

  /* ------- Radius ---------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;       /* base --radius = 0.875rem = 14px */
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ------- Spacing scale (Tailwind 0.25rem unit) -------------------- */
  --space-0: 0;
  --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;
  --space-20: 80px;
  --space-24: 96px;

  /* ------- Motion ---------------------------------------------------- */
  --ease-in:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast:   80ms;
  --duration-base:   150ms;
  --duration-slow:   240ms;

  /* ------- Type scale (Inter / InterVar) ----------------------------- */
  --font-sans: "InterVar", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --text-xs:   12px;   --leading-xs:   16px;
  --text-sm:   14px;   --leading-sm:   20px;
  --text-base: 16px;   --leading-base: 24px;
  --text-lg:   18px;   --leading-lg:   28px;
  --text-xl:   20px;   --leading-xl:   28px;
  --text-2xl:  24px;   --leading-2xl:  32px;
  --text-3xl:  30px;   --leading-3xl:  36px;
  --text-4xl:  36px;   --leading-4xl:  40px;
  --text-5xl:  48px;   --leading-5xl:  1;
  --text-6xl:  60px;

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

  /* ------- Semantic tokens (light theme — from colors.css) ---------- */
  --foreground: var(--slate-12);
  --background: var(--white);
  --card: var(--slate-a2);
  --card-foreground: var(--slate-12);
  --popover: var(--slate-2);
  --popover-foreground: var(--slate-12);
  --primary: var(--blue-10);
  --primary-foreground: var(--white);
  --secondary: var(--slate-a3);
  --secondary-foreground: var(--slate-12);
  --muted: var(--slate-a3);
  --muted-foreground: var(--slate-11);
  --accent: var(--slate-a3);
  --accent-foreground: var(--slate-12);
  --destructive: var(--red-9);
  --destructive-foreground: var(--white);
  --border: var(--slate-a6);
  --input: var(--slate-a7);
  --ring: var(--blue-a8);
  --radius: 0.875rem;

  /* Friendly aliases */
  --fg-1: var(--slate-12);  /* primary text */
  --fg-2: var(--slate-11);  /* muted text */
  --fg-3: var(--slate-10);  /* placeholder */
  --fg-inverse: var(--white);
}

/* Dark theme */
[data-theme="dark"] {
  --foreground: var(--white);
  --background: #111113;        /* slate-1 dark */
  --card: #1c1d1f;
  --popover: #1c1d1f;
  --border: rgba(255,255,255,0.10);
  --input:  rgba(255,255,255,0.15);
  --fg-1: var(--white);
  --fg-2: rgba(255,255,255,0.72);
  --fg-3: rgba(255,255,255,0.45);
}

/* ---------- Element defaults ------------------------------------------- */
html, body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
h2, .h2 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
h3, .h3 {
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  letter-spacing: -0.01em;
}
h4, .h4 {
  font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
}
p, .p {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-1);
}
.p-lg { font-size: var(--text-base); line-height: var(--leading-base); }
.p-sm { font-size: var(--text-xs);  line-height: var(--leading-xs); color: var(--fg-2); }
.eyebrow {
  font-size: 11px;
  line-height: 1;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--slate-a3);
  padding: 2px 5px;
  border-radius: var(--radius-xs);
}
a { color: var(--blue-11); text-decoration: none; }
a:hover { text-decoration: underline; }