/* ──────────────────────────────────────────────────────────────
   Somo AI — Colors & Type
   Amber Horizon palette · Inter typography
   ────────────────────────────────────────────────────────────── */

/* Inter loaded via Google Fonts CDN (substitution noted in README).
   For local hosting, download Inter (400, 500, 700, 800) into /fonts
   and replace the @import with @font-face rules. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap");

:root {
  /* ── Core palette — Amber Horizon ─────────────────────────── */
  --navy:        #1A1A2E;  /* Primary / Brand */
  --amber:       #F59E0B;  /* Accent / CTA */
  --sky:         #3B82F6;  /* Secondary */
  --surface:     #F1F5F9;  /* Page background */
  --slate:       #64748B;  /* Body text */
  --white:       #FFFFFF;  /* Canvas */

  /* ── Extended scale (derived for shadows, hovers, borders) ── */
  --navy-900:    #0F0F1F;
  --navy-800:    #1A1A2E;
  --navy-700:    #25253F;
  --navy-600:    #2F2F4E;
  --navy-500:    #3D3D5C;

  --amber-700:   #B97506;  /* hover/press on amber CTA */
  --amber-600:   #D98908;
  --amber-500:   #F59E0B;
  --amber-400:   #FBBF24;
  --amber-200:   #FDE68A;  /* amber hairline / wash edge (highlight editor) */
  --amber-100:   #FEF3C7;  /* soft amber background (credit badge) */
  --amber-50:    #FFFBEB;

  --sky-700:     #1D4ED8;
  --sky-600:     #2563EB;
  --sky-500:     #3B82F6;
  --sky-100:     #DBEAFE;
  --sky-50:      #EFF6FF;

  --slate-900:   #0F172A;
  --slate-700:   #334155;
  --slate-600:   #475569;
  --slate-500:   #64748B;
  --slate-400:   #94A3B8;
  --slate-300:   #CBD5E1;
  --slate-200:   #E2E8F0;
  --slate-100:   #F1F5F9;  /* = surface */
  --slate-50:    #F8FAFC;

  --success:     #10B981;  /* "Live" badge, addressed comments */
  --warning:     #F59E0B;  /* = amber, open comments */
  --danger:      #EF4444;

  /* Status tints and readable text shades (rc-0.15.2, Connected Sources):
     a soft success wash for "Connected" and done notices, a dark amber that
     passes contrast on amber washes, and a quiet danger for Disconnect. */
  --success-50:  #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-700: #047857;
  --success-800: #065F46;
  --amber-800:   #92400E;
  --danger-300:  #FCA5A5;
  --danger-700:  #B91C1C;

  /* ── Semantic tokens ─────────────────────────────────────── */
  --bg-canvas:        var(--white);
  --bg-page:          var(--surface);
  --bg-elevated:      var(--white);
  --bg-inverse:       var(--navy);
  --bg-input:         var(--surface);
  --bg-amber-soft:    var(--amber-100);
  --bg-sky-soft:      var(--sky-50);

  --fg-default:       var(--navy);
  --fg-muted:         var(--slate);
  --fg-subtle:        var(--slate-400);
  --fg-on-amber:      var(--navy);
  --fg-on-navy:       var(--white);
  --fg-link:          var(--sky);

  --border-default:   var(--slate-200);
  --border-strong:    var(--slate-300);
  --border-inverse:   var(--navy-700);
  --border-focus:     var(--amber);

  /* ── Type system ─────────────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* Scale (px) — from design tokens */
  --fs-display:  40px;
  --fs-h1:       28px;
  --fs-h2:       20px;
  --fs-h3:       16px;
  --fs-body:     14px;
  --fs-caption:  12px;
  --fs-label:    11px;

  /* Larger marketing scale (web hero, etc) */
  --fs-hero:     64px;
  --fs-hero-sm:  48px;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --letter-tight:  -0.02em;
  --letter-normal: -0.01em;
  --letter-wide:    0.02em;

  /* ── Spacing (4-px base) ─────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ── Shadows — short, soft, never colourful ──────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 15, 31, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 15, 31, 0.06), 0 1px 3px rgba(15, 15, 31, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 15, 31, 0.08), 0 2px 4px -2px rgba(15, 15, 31, 0.04);
  --shadow-lg: 0 12px 24px -8px rgba(15, 15, 31, 0.12), 0 4px 8px -4px rgba(15, 15, 31, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(15, 15, 31, 0.18);

  /* On dark / Navy surfaces — inner highlight + outer halo */
  --shadow-on-dark: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                    0 8px 24px -8px rgba(0, 0, 0, 0.5);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1200px;
  --nav-h:         64px;
}

/* ──────────────────────────────────────────────────────────────
   Base + semantic type styles
   ────────────────────────────────────────────────────────────── */
html {
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-size: var(--fs-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--letter-tight);
  color: var(--fg-default);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--weight-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-tight);
  color: var(--fg-default);
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--letter-normal);
  color: var(--fg-default);
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

p, .body {
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.caption {
  font-size: var(--fs-caption);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.label {
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--letter-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Hero — marketing site */
.hero-title {
  font-size: var(--fs-hero);
  font-weight: var(--weight-extrabold);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg-default);
}
@media (max-width: 720px) {
  .hero-title { font-size: var(--fs-hero-sm); }
}

/* Wordmark — reusable inline lockup */
.wordmark {
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  color: var(--navy);
  white-space: nowrap;
}
.wordmark::after {
  content: "AI";
  color: var(--amber);
  margin-left: 0.18em;
}