/* ============================================================
   Auto-LT Design System — Foundations
   Cool, sleek, Apple-inspired. Slate greys + cobalt blues.
   ============================================================ */

/* -----------------------------------------------------------
   Type — Cantarell (brand font, provided).
   Display + Text both use Cantarell. Mono is JetBrains Mono.
   ----------------------------------------------------------- */
@font-face {
  font-family: "Cantarell";
  src: url("fonts/Cantarell-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cantarell";
  src: url("fonts/Cantarell-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cantarell";
  src: url("fonts/Cantarell-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cantarell";
  src: url("fonts/Cantarell-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ---------- Type families ---------- */
  --font-display: "Cantarell", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-text:    "Cantarell", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-feature-default: normal;

  /* ---------- Type scale ---------- */
  --fs-display-2xl: 80px;   --lh-display-2xl: 1.05; --tr-display-2xl: -0.025em;
  --fs-display-xl:  64px;   --lh-display-xl:  1.06; --tr-display-xl:  -0.022em;
  --fs-display-lg:  48px;   --lh-display-lg:  1.08; --tr-display-lg:  -0.018em;
  --fs-h1:          36px;   --lh-h1:          1.15; --tr-h1:          -0.014em;
  --fs-h2:          28px;   --lh-h2:          1.2;  --tr-h2:          -0.012em;
  --fs-h3:          22px;   --lh-h3:          1.25; --tr-h3:          -0.008em;
  --fs-h4:          18px;   --lh-h4:          1.3;  --tr-h4:          -0.005em;
  --fs-body-lg:     17px;   --lh-body-lg:     1.5;  --tr-body-lg:      0em;
  --fs-body:        15px;   --lh-body:        1.55; --tr-body:         0em;
  --fs-body-sm:     13px;   --lh-body-sm:     1.5;  --tr-body-sm:      0em;
  --fs-caption:     11px;   --lh-caption:     1.4;  --tr-caption:      0.04em;

  /* ---------- Weights ---------- */
  --fw-regular:  400;
  --fw-medium:   700;
  --fw-semibold: 700;
  --fw-bold:     700;

  /* ============================================================
     Color — cool greys + cobalt blues
     ============================================================ */

  --slate-0:   #ffffff;
  --slate-50:  #f6f8fa;
  --slate-100: #eef1f5;
  --slate-200: #e2e6ec;
  --slate-300: #cdd3dc;
  --slate-400: #a4adba;
  --slate-500: #7b8694;
  --slate-600: #5b6573;
  --slate-700: #3f4753;
  --slate-800: #262b33;
  --slate-900: #14171c;
  --slate-1000: #0a0c10;

  --blue-50:   #eff6ff;
  --blue-100:  #dbe9fe;
  --blue-200:  #b8d4fd;
  --blue-300:  #87b6fb;
  --blue-400:  #5191f6;
  --blue-500:  #2872ee;
  --blue-600:  #1a5cd6;
  --blue-700:  #1849ad;
  --blue-800:  #173d8a;
  --blue-900:  #15336e;

  --teal-500:    #0fb5b1;
  --amber-500:   #f5a524;
  --green-500:   #15a85f;
  --red-500:     #e5484d;

  /* ---------- Semantic — Light ---------- */
  --bg-canvas:    var(--slate-50);
  --bg-surface:   var(--slate-0);
  --bg-raised:    var(--slate-0);
  --bg-sunken:    var(--slate-100);
  --bg-inverse:   var(--slate-900);

  --fg-primary:   var(--slate-900);
  --fg-secondary: var(--slate-700);
  --fg-tertiary:  var(--slate-500);
  --fg-disabled:  var(--slate-400);
  --fg-on-accent: #ffffff;
  --fg-on-inverse: var(--slate-50);

  --border-subtle: rgba(15, 22, 36, 0.06);
  --border-default: rgba(15, 22, 36, 0.10);
  --border-strong: rgba(15, 22, 36, 0.18);
  --border-focus:  var(--blue-500);

  --accent-primary:        var(--blue-500);
  --accent-primary-hover:  var(--blue-600);
  --accent-primary-press:  var(--blue-700);
  --accent-primary-soft:   var(--blue-50);

  --status-success: var(--green-500);
  --status-warning: var(--amber-500);
  --status-danger:  var(--red-500);
  --status-info:    var(--blue-500);

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0px;
  --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;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs:  0 1px 1px rgba(15, 22, 36, 0.04),
                0 0 0 1px rgba(15, 22, 36, 0.04);
  --shadow-sm:  0 1px 2px rgba(15, 22, 36, 0.05),
                0 0 0 1px rgba(15, 22, 36, 0.05);
  --shadow-md:  0 4px 12px -2px rgba(15, 22, 36, 0.08),
                0 2px 4px -1px rgba(15, 22, 36, 0.04),
                0 0 0 1px rgba(15, 22, 36, 0.05);
  --shadow-lg:  0 12px 32px -8px rgba(15, 22, 36, 0.14),
                0 4px 12px -4px rgba(15, 22, 36, 0.08),
                0 0 0 1px rgba(15, 22, 36, 0.05);
  --shadow-xl:  0 32px 64px -16px rgba(15, 22, 36, 0.22),
                0 12px 24px -8px rgba(15, 22, 36, 0.10),
                0 0 0 1px rgba(15, 22, 36, 0.05);
  --shadow-focus: 0 0 0 3px rgba(40, 114, 238, 0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-slower: 500ms;

  /* ---------- Layout ---------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas:    var(--slate-1000);
    --bg-surface:   var(--slate-900);
    --bg-raised:    var(--slate-800);
    --bg-sunken:    #06080c;
    --bg-inverse:   var(--slate-50);

    --fg-primary:   var(--slate-50);
    --fg-secondary: var(--slate-300);
    --fg-tertiary:  var(--slate-400);
    --fg-disabled:  var(--slate-600);
    --fg-on-accent: #ffffff;
    --fg-on-inverse: var(--slate-900);

    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.18);

    --accent-primary-soft: rgba(40, 114, 238, 0.16);

    --shadow-xs:  0 1px 1px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-md:  0 4px 12px -2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    --shadow-lg:  0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
    --shadow-xl:  0 32px 64px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
  }
}

/* ============================================================
   Semantic type roles
   ============================================================ */

html, body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  font-feature-settings: var(--font-feature-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display-2xl, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display-2xl);
  letter-spacing: var(--tr-display-2xl);
  font-weight: 700;
}
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--tr-display-xl);
  font-weight: 700;
}
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  letter-spacing: var(--tr-display-lg);
  font-weight: 700;
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: 700;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: 700;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: 700;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4);
  font-weight: 700;
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); letter-spacing: var(--tr-body-lg); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); letter-spacing: var(--tr-body-sm); }
.caption  {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tr-caption);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 700;
}
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.fg-primary   { color: var(--fg-primary); }
.fg-secondary { color: var(--fg-secondary); }
.fg-tertiary  { color: var(--fg-tertiary); }
.fg-accent    { color: var(--accent-primary); }