/* ============================================================
   ShipSmart — Theme: AURORA (Stripe-inspired, 2026-07-16 rebrand)
   Electric-indigo primary on deep-navy ink, atmospheric gradient
   mesh across the upper third, thin (300) display type with
   negative tracking, tight-radius pill buttons, cream interlude.
   Source of record: /DESIGN.md at the repo root.
   Scoped under html[data-theme="aurora"].
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html[data-theme="aurora"] {
  --bg:          #ffffff;
  --surface:     #ffffff;
  --surface-2:   #f6f9fc;   /* canvas-soft — cool off-white feature band */
  --surface-3:   #eef2f7;
  --ink:         #0d253d;   /* deep navy — never pure black */
  --ink-2:       #273951;
  --muted:       #64748d;
  --border:      #e3e8ee;   /* hairline */
  --border-soft: #eef2f7;

  /* Brand accent — ShipSmart gold (kept in sync with src/style.css) */
  --gold:        #E0952A;   /* gold primary — the filled-CTA colour */
  --gold-deep:   #B4720F;   /* deep gold — gradient mid-stop / press */
  --gold-soft:   #FBEAC7;   /* pale gold tag fill */
  --gold-line:   #EAD3A0;

  /* Gradient-mesh accent stops (warm gold family + navy anchor) */
  --cream:       #f5e9d4;
  --lemon:       #F5D08A;
  --lavender:    #EFBB59;
  --indigo:      #E0952A;   /* name retained; value is gold */
  --navy:        #183B56;
  --ruby:        #C2410C;
  --magenta:     #F5B544;

  --green:       oklch(0.66 0.14 160);
  --green-soft:  oklch(0.95 0.06 162);
  --green-deep:  oklch(0.54 0.12 162);

  --blue:        var(--indigo);
  --blue-soft:   var(--gold-soft);

  /* Stripe radii: tighter than the old aurora. Pill for buttons/tags. */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Shadow-blue (#003770) based elevation, per DESIGN.md § Elevation */
  --shadow-sm: 0 1px 3px rgba(0,55,112,0.08);
  --shadow-md: 0 8px 24px rgba(0,55,112,0.08), 0 2px 6px rgba(0,55,112,0.04);
  --shadow-lg: 0 24px 56px -20px rgba(0,55,112,0.22), 0 6px 16px rgba(0,55,112,0.08);
  --shadow-xl: 0 40px 90px -28px rgba(0,55,112,0.28), 0 12px 28px rgba(0,55,112,0.10);

  --font: 'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  font-feature-settings: "ss01";
}

/* ---- Type: thin-300 editorial display with negative tracking ----
   Weight 300 is the brand. Bumping above 300 removes the editorial air
   (DESIGN.md § Typography Principles). ---- */
html[data-theme="aurora"] h1,
html[data-theme="aurora"] h2,
html[data-theme="aurora"] h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
}
html[data-theme="aurora"] .hero h1 {
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
/* Restored golden gradient on the accent word (user request). Kept subtle and
   confined to the single accent phrase — not body text. */
html[data-theme="aurora"] .hero h1 .accent {
  background: linear-gradient(100deg, var(--gold) 0%, var(--gold-deep) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-deep);
}
html[data-theme="aurora"] .hero-sub,
html[data-theme="aurora"] .section-head p {
  font-weight: 300;
  color: var(--ink-2);
}
html[data-theme="aurora"] .eyebrow {
  color: var(--gold-deep);
  letter-spacing: 0.1em;
}

/* ---- Gradient mesh atmosphere: warm gold family (cream → lemon → gold) with
   a cool navy-tinted stop for depth, washed across the upper third. ---- */
html[data-theme="aurora"] body {
  background:
    radial-gradient(1100px 640px at 78% -12%, rgba(245,181,68,0.34), transparent 60%),
    radial-gradient(900px 700px at 96% 4%, rgba(224,149,42,0.20), transparent 56%),
    radial-gradient(1000px 720px at 6% -6%, rgba(245,233,212,0.70), transparent 58%),
    radial-gradient(820px 640px at 42% -14%, rgba(24,59,86,0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="aurora"] .hero::before { background: none; }
html[data-theme="aurora"] .section.alt {
  background: var(--surface-2);
}

/* ---- Nav floating over the mesh ---- */
html[data-theme="aurora"] .nav {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-soft);
}

/* ---- Buttons: tight gold-gradient pills (8px 16px, 9999px) ---- */
html[data-theme="aurora"] .btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 8px 22px -10px rgba(180,114,15,0.55);
  font-weight: 500;
  letter-spacing: 0;
}
html[data-theme="aurora"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--gold-deep) 0%, #8A560B 100%);
}
html[data-theme="aurora"] .btn-ghost {
  border-radius: 9999px;
  border: 1px solid var(--gold-deep);
  color: var(--gold-deep);
  background: #ffffff;
  font-weight: 500;
}
html[data-theme="aurora"] .btn-ghost:hover {
  background: var(--gold-soft);
}
html[data-theme="aurora"] .hero-pill {
  border-radius: 9999px;
  box-shadow: var(--shadow-sm);
  border-color: var(--gold-line);
  background: rgba(255,255,255,0.85);
  color: var(--ink-2);
  font-weight: 400;
}
html[data-theme="aurora"] .hero-pill .tag {
  background: var(--gold-soft);
  color: var(--gold-deep);
  border-radius: 9999px;
  font-weight: 500;
}

/* ---- Cards: near-white on hairline borders, subtle shadow-blue lift ----
   Flatter than the old glassy aurora; glass is reserved, not the default
   (DESIGN.md § Elevation, and the design system's glassmorphism ban). ---- */
html[data-theme="aurora"] .prob-card,
html[data-theme="aurora"] .feat-card,
html[data-theme="aurora"] .ben,
html[data-theme="aurora"] .sol-item,
html[data-theme="aurora"] .kpi,
html[data-theme="aurora"] .panel {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}
html[data-theme="aurora"] .step-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
html[data-theme="aurora"] .feat-card:hover,
html[data-theme="aurora"] .prob-card:hover,
html[data-theme="aurora"] .ben:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gold-line);
}

/* ---- Icon tiles: soft indigo, no gradient depth ---- */
html[data-theme="aurora"] .feat-ico {
  background: var(--gold-soft);
  color: var(--indigo);
  box-shadow: inset 0 0 0 1px var(--gold-line);
  border-radius: var(--radius);
}
html[data-theme="aurora"] .step-ico {
  background: var(--gold-soft);
  color: var(--indigo);
  box-shadow: inset 0 0 0 1px var(--gold-line);
  border-radius: var(--radius);
}
html[data-theme="aurora"] .step-num {
  color: var(--indigo);
  font-weight: 300;
}
html[data-theme="aurora"] .ben-ico,
html[data-theme="aurora"] .sol-check {
  background: var(--green-soft);
  color: var(--green-deep);
  border-radius: var(--radius-sm);
}

/* ---- Doc cards: light with a real shadow (product-UI mockup treatment) ---- */
html[data-theme="aurora"] .doc-card {
  background: #ffffff;
  backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
}

/* ---- Ground plate ---- */
html[data-theme="aurora"] .ground {
  background: linear-gradient(160deg, #ffffff, var(--surface-2));
}

/* ---- CTA: inverted deep-navy slab, the featured surface ---- */
html[data-theme="aurora"] .cta-box {
  background: linear-gradient(140deg, #183B56 0%, #102A3E 62%, #1B3247 100%);
  border-radius: var(--radius-xl);
}
html[data-theme="aurora"] .cta-box::before {
  background:
    radial-gradient(620px 340px at 82% -12%, rgba(245,181,68,0.42), transparent 68%),
    radial-gradient(520px 320px at 8% 120%, rgba(224,149,42,0.26), transparent 68%),
    radial-gradient(460px 320px at 50% 60%, rgba(245,208,138,0.18), transparent 70%);
}
html[data-theme="aurora"] .cta-box .btn-ghost {
  border-color: rgba(255,255,255,0.5);
  color: #ffffff;
  background: transparent;
}
html[data-theme="aurora"] .cta-box .btn-ghost:hover {
  background: rgba(255,255,255,0.10);
}

/* ---- Tags / badges keep the pill shape ---- */
html[data-theme="aurora"] .badge { border-radius: 9999px; font-weight: 500; }

/* ---- Logo / dash chrome ---- */
html[data-theme="aurora"] .logo-mark { border-radius: 10px; }
html[data-theme="aurora"] .dash-shell {
  box-shadow: var(--shadow-xl);
  border-radius: var(--radius-lg);
}

/* ---- Money / numeric cells: tabular figures (the quiet financial signal) ---- */
html[data-theme="aurora"] .kpi-val,
html[data-theme="aurora"] .ship-id,
html[data-theme="aurora"] .stat b {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}