/* ============================================================
   Crazy Rich Agents — Design Tokens
   Colors + Typography (base + semantic)
   ============================================================ */

/* ---- Google Fonts (substitutes flagged in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ================================================
     COLORS — PRIMARY (Navy)
     ================================================ */
  --navy-deep:   #0D1F30;   /* darkest — hero backgrounds, high-contrast text */
  --navy-dark:   #132942;   /* body backgrounds on dark mode, headers */
  --navy:        #1B3A5C;   /* primary navy — buttons, links, tagline */

  /* ================================================
     COLORS — BLUES (accent / highlight)
     ================================================ */
  --blue:        #4A8EC2;   /* info accents, secondary actions */
  --blue-light:  #6BAED6;   /* active states, highlights */
  --blue-pale:   #E8F1F8;   /* tinted surfaces, info banners */

  /* ================================================
     COLORS — ORANGES (brand CTA)
     ================================================ */
  --orange:       #E8853D;  /* primary CTA, brand accent */
  --orange-hover: #D4742F;  /* CTA hover */
  --orange-light: #F5A94D;  /* highlights, badges */
  --orange-pale:  #FFF4E8;  /* tinted surfaces, notifications */

  /* ================================================
     COLORS — NEUTRALS
     ================================================ */
  --white:      #FFFFFF;
  --off-white:  #F7F9FC;
  --gray-50:    #F0F3F7;
  --gray-100:   #E2E7EE;
  --gray-400:   #8896A7;
  --gray-600:   #556275;
  --gray-800:   #2D3A48;

  /* ================================================
     COLORS — SEMANTIC
     ================================================ */
  --bg:            var(--off-white);
  --bg-elevated:   var(--white);
  --bg-subtle:     var(--gray-50);
  --bg-inverse:    var(--navy-deep);

  --fg:            var(--navy-deep);         /* primary text */
  --fg-muted:      var(--gray-600);          /* secondary text */
  --fg-subtle:     var(--gray-400);          /* tertiary / meta */
  --fg-inverse:    var(--white);             /* text on dark bg */
  --fg-brand:      var(--orange);
  --fg-link:       var(--navy);

  --border:        var(--gray-100);
  --border-strong: var(--gray-400);
  --border-focus:  var(--blue);

  --accent:        var(--orange);
  --accent-hover:  var(--orange-hover);
  --accent-soft:   var(--orange-pale);

  --success:       #2F8F5F;
  --warning:       var(--orange);
  --danger:        #C84B3F;
  --info:          var(--blue);

  /* ================================================
     TYPOGRAPHY — FAMILIES
     Montserrat  — wordmark, headings, UI (geometric sans similar to the logo)
     Lora        — tagline / editorial serif (similar to the logo's serif tagline)
     Inter       — body long-form (falls back when Montserrat is too heavy)
     ================================================ */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ================================================
     TYPOGRAPHY — SCALE (modular, 1.25 major third)
     ================================================ */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;   /* for small eyebrow caps */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ================================================
     SPACING (4px base)
     ================================================ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ================================================
     RADII
     ================================================ */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ================================================
     SHADOWS
     ================================================ */
  --shadow-xs: 0 1px 2px rgba(13, 31, 48, 0.06);
  --shadow-sm: 0 2px 4px rgba(13, 31, 48, 0.06), 0 1px 2px rgba(13, 31, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 31, 48, 0.08), 0 2px 4px rgba(13, 31, 48, 0.04);
  --shadow-lg: 0 12px 28px rgba(13, 31, 48, 0.12), 0 4px 8px rgba(13, 31, 48, 0.06);
  --shadow-xl: 0 24px 48px rgba(13, 31, 48, 0.18), 0 8px 16px rgba(13, 31, 48, 0.08);
  --shadow-orange: 0 8px 20px rgba(232, 133, 61, 0.28);
  --shadow-inset:  inset 0 1px 2px rgba(13, 31, 48, 0.08);

  /* ================================================
     MOTION
     ================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ============================================================
   SEMANTIC TEXT STYLES
   Use these directly on elements.
   ============================================================ */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-brand);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

.tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--navy);
  line-height: var(--lh-snug);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.caption, .meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--gray-50);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--navy);
}

a, .link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover, .link:hover { color: var(--orange); }