/* autom8ly-ds.css (bundle: fonts + tokens + themes + base + components) — GENERATED by scripts/build.mjs. Do not edit by hand.
   Source of truth: tokens/tokens.json + tokens/themes.json. Run `npm run build`. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* tokens.css — GENERATED by scripts/build.mjs. Do not edit by hand.
   Source of truth: tokens/tokens.json + tokens/themes.json. Run `npm run build`. */

:root {
  /* Brand */
  --brand-navy: #0F3765;
  --brand-navy-deep: #0A2647;
  --brand-orange: #F9824F;
  --brand-orange-deep: #E44141;
  /* Support (navy ramp for theming) */
  --navy-950: #071A30;
  --navy-700: #1B4D85;
  --navy-border: #1C3A5E;
  /* Neutral */
  --white: #FAFEFF;
  --off-white: #F5F7FA;
  --gray-100: #E8ECF1;
  --gray-300: #B5BFCC;
  --gray-500: #6B7888;
  --gray-700: #3D4A5C;
  --ink: #1E293B;
  --black: #1E293B; /* legacy alias */
  /* Semantic (fixed primitives; themed roles live in themes.css) */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #0F3765;
  /* Gradients */
  --brand-gradient-orange: linear-gradient(124deg, #E44141 0%, #F9824F 100%);
  --brand-gradient-navy: linear-gradient(135deg, #0A2647 0%, #0F3765 100%);
  /* Typography */
  --font-primary: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 100px;
  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 55, 101, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 55, 101, 0.12);
  --shadow-lg: 0 10px 30px rgba(15, 55, 101, 0.16);
  --shadow-orange-glow: 0 10px 20px rgba(249, 130, 79, 0.20), 0 2px 4px rgba(249, 130, 79, 0.50);
}

/* themes.css — GENERATED by scripts/build.mjs. Do not edit by hand.
   Source of truth: tokens/tokens.json + tokens/themes.json. Run `npm run build`. */

/* Light theme (default). Set data-theme="dark" on <html> to opt into dark,
   or rely on prefers-color-scheme below when no data-theme is set. */
:root,
[data-theme="light"] {
  --bg: #FAFEFF;
  --bg-subtle: #F5F7FA;
  --surface: #FAFEFF;
  --surface-raised: #FAFEFF;
  --surface-sunken: #F5F7FA;
  --border: #E8ECF1;
  --border-strong: #B5BFCC;
  --text: #1E293B;
  --text-muted: #3D4A5C;
  --text-subtle: #6B7888;
  --text-inverse: #FAFEFF;
  --heading: #0F3765;
  --primary: #0F3765;
  --primary-hover: #0A2647;
  --primary-contrast: #FAFEFF;
  --accent: #F9824F;
  --accent-hover: #E44141;
  --accent-contrast: #FAFEFF;
  --link: #0F3765;
  --link-hover: #0A2647;
  --focus-ring: #F9824F;
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #0F3765;
}

[data-theme="dark"] {
  --bg: #071A30;
  --bg-subtle: #0A2647;
  --surface: #0A2647;
  --surface-raised: #0F3765;
  --surface-sunken: #071A30;
  --border: #1C3A5E;
  --border-strong: #0F3765;
  --text: #F5F7FA;
  --text-muted: #B5BFCC;
  --text-subtle: #6B7888;
  --text-inverse: #FAFEFF;
  --heading: #FAFEFF;
  --primary: #F9824F;
  --primary-hover: #E44141;
  --primary-contrast: #FAFEFF;
  --accent: #1B4D85;
  --accent-hover: #0F3765;
  --accent-contrast: #FAFEFF;
  --link: #F9824F;
  --link-hover: #E44141;
  --focus-ring: #F9824F;
  --success: #10B981;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #F9824F;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071A30;
    --bg-subtle: #0A2647;
    --surface: #0A2647;
    --surface-raised: #0F3765;
    --surface-sunken: #071A30;
    --border: #1C3A5E;
    --border-strong: #0F3765;
    --text: #F5F7FA;
    --text-muted: #B5BFCC;
    --text-subtle: #6B7888;
    --text-inverse: #FAFEFF;
    --heading: #FAFEFF;
    --primary: #F9824F;
    --primary-hover: #E44141;
    --primary-contrast: #FAFEFF;
    --accent: #1B4D85;
    --accent-hover: #0F3765;
    --accent-contrast: #FAFEFF;
    --link: #F9824F;
    --link-hover: #E44141;
    --focus-ring: #F9824F;
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #F9824F;
  }
}

/* base + components — GENERATED. */

*, *::before, *::after { box-sizing: border-box; }

html {  -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--heading);
}
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

.fw-700 { font-weight: var(--weight-bold); }
p { margin: 0 0 1rem; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
code, pre, kbd, samp { font-family: var(--font-mono); }
hr { border: 0; border-top: 1px solid var(--border); }
small { font-size: var(--font-size-sm); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Buttons (brand CTAs — backward-compatible with autom8ly-web) -------- */
.btn {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: var(--weight-medium);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background 1s ease, box-shadow 0.3s ease;
}
.btn-orange {
  color: var(--white);
  background: var(--brand-gradient-orange);
  box-shadow: 0 10px 20px 0 rgba(249, 130, 79, 0.20), 0 2px 4px 0 rgba(249, 130, 79, 0.50), 0 4px 20px 0 #F9824F inset;
}
.btn-orange:hover {
  color: var(--white);
  box-shadow: 0 10px 20px 0 rgba(249, 130, 79, 0.2), 0 2px 4px 0 rgba(249, 130, 79, 0.5), 0 10px 20px 0 rgba(255, 255, 255, 0.4) inset;
}
.btn-orange:active {
  box-shadow: 0 10px 20px 0 rgba(249, 130, 79, 0.20), 0 2px 2px 0 rgba(249, 130, 79, 0.50), 0 -10px 20px 0 rgba(255, 255, 255, 0.4) inset;
}
.btn-orange:disabled {
  background: #f69f87;
  box-shadow: 0 10px 20px 0 rgba(249, 130, 79, 0.20), 0 2px 4px 0 rgba(249, 130, 79, 0.50);
}
.btn-navy {
  color: var(--white);
  background: var(--brand-gradient-navy);
  box-shadow: 0 10px 20px 0 rgba(15, 55, 101, 0.20), 0 2px 4px 0 rgba(15, 55, 101, 0.50);
}
.btn-navy:hover {
  color: var(--white);
  box-shadow: 0 10px 20px 0 rgba(15, 55, 101, 0.25), 0 10px 20px 0 rgba(255, 255, 255, 0.3) inset;
}

/* ---- Theme-aware UI controls (for app surfaces; light + dark) ------------ */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border: 0; border-radius: var(--radius-pill);
  font: var(--weight-medium) 16px/1.2 var(--font-primary);
  color: var(--primary-contrast); background: var(--primary);
  cursor: pointer; transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border: 0; border-radius: var(--radius-pill);
  font: var(--weight-medium) 16px/1.2 var(--font-primary);
  color: var(--accent-contrast); background: var(--accent);
  cursor: pointer; transition: background 0.2s ease;
}
.btn-secondary:hover { background: var(--accent-hover); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-pill);
  font: var(--weight-medium) 16px/1.2 var(--font-primary);
  color: var(--primary); background: transparent;
  cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-ghost:hover { background: var(--surface-raised); border-color: var(--border-strong); }

/* ---- Card ---------------------------------------------------------------- */
.a8-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  color: var(--text);
}

/* ---- Input --------------------------------------------------------------- */
.a8-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.a8-input::placeholder { color: var(--text-subtle); }
.a8-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--primary); }

/* ---- Badge --------------------------------------------------------------- */
.a8-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); font-weight: var(--weight-semibold); line-height: 1.4;
}
.a8-badge-success { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.a8-badge-warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.a8-badge-error   { color: var(--error);   background: color-mix(in srgb, var(--error) 14%, transparent); }
.a8-badge-info    { color: var(--info);    background: color-mix(in srgb, var(--info) 14%, transparent); }

/* ---- Surfaces / utilities ------------------------------------------------ */
.a8-surface { background: var(--surface); color: var(--text); }
.a8-section-navy { background: var(--brand-gradient-navy); color: var(--white); }
.a8-text-gradient {
  background: var(--brand-gradient-orange);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}