/* Web fonts loaded from Google Fonts. No self-hosted font files are shipped. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

/* Fortune Gems Guide — Color tokens
   A dark jewel theme: deep emerald/teal canvas for the hero, clean white
   content, soft-green cards, and four gemstone accents (emerald, gold,
   ruby, sapphire). All semantic aliases reference the base ramps below so
   the whole system can be retuned from a handful of values. */

:root {
  /* ---- Emerald / teal (primary brand + dark backgrounds) ---- */
  --emerald-50:  #ecfbf3;
  --emerald-100: #d2f4e1;
  --emerald-200: #a6e8c5;
  --emerald-300: #6fd6a4;
  --emerald-400: #34bd82;
  --emerald-500: #1fa971;  /* brand emerald */
  --emerald-600: #15875b;
  --emerald-700: #126b4a;
  --emerald-800: #0f4f38;
  --emerald-900: #0b3a2a;
  --emerald-950: #04231c;  /* darkest canvas */

  --teal-900:    #07312f;
  --teal-800:    #0a423f;

  /* ---- Gold (CTA / highlight) ---- */
  --gold-50:  #fdf6e3;
  --gold-100: #fae9b8;
  --gold-200: #f4d585;
  --gold-300: #efc257;
  --gold-400: #ecb13a;
  --gold-500: #e0a92e;  /* CTA base */
  --gold-600: #c2871c;
  --gold-700: #976414;

  /* ---- Ruby (alert / heat accent) ---- */
  --ruby-100: #fcdfe6;
  --ruby-300: #f08aa3;
  --ruby-500: #e0245e;
  --ruby-600: #c41d4d;
  --ruby-700: #9c1740;

  /* ---- Sapphire (info accent) ---- */
  --sapphire-100: #d9e6fb;
  --sapphire-300: #7fa8ee;
  --sapphire-500: #2d6fe0;
  --sapphire-600: #1f56bd;
  --sapphire-700: #18408f;

  /* ---- Neutrals (warm-cool slate, readable on white) ---- */
  --slate-50:  #f6f8f7;
  --slate-100: #eef2f0;
  --slate-200: #dde5e1;
  --slate-300: #c2cec9;
  --slate-400: #93a39c;
  --slate-500: #677871;
  --slate-600: #4a5a54;
  --slate-700: #34423d;
  --slate-800: #212c28;
  --slate-900: #10241d;
  --white:     #ffffff;

  /* ===== Semantic aliases ===== */
  /* Surfaces */
  --surface-canvas:     var(--white);        /* page background (content) */
  --surface-card:       var(--white);        /* default card */
  --surface-card-soft:  #f1f8f4;             /* soft-green card */
  --surface-muted:      var(--slate-50);      /* subtle section band */
  --surface-dark:       var(--emerald-950);   /* hero / footer canvas */
  --surface-dark-2:     var(--emerald-900);
  --surface-overlay:    rgba(4, 35, 28, 0.62);/* modal scrim */

  /* Brand */
  --brand:              var(--emerald-500);
  --brand-strong:       var(--emerald-700);
  --brand-on-dark:      var(--emerald-300);
  --accent-gold:        var(--gold-500);
  --accent-ruby:        var(--ruby-500);
  --accent-sapphire:    var(--sapphire-500);

  /* Text */
  --text-strong:        var(--slate-900);     /* headings */
  --text-body:          var(--slate-700);     /* paragraphs */
  --text-muted:         var(--slate-500);     /* captions, meta */
  --text-on-dark:       #eaf5ee;              /* body on dark canvas */
  --text-on-dark-muted: #9bc4b3;
  --text-on-brand:      var(--white);
  --text-on-gold:       #3a2806;             /* dark ink on gold CTA */

  /* Lines */
  --border-subtle:      var(--slate-200);
  --border-strong:      var(--slate-300);
  --border-on-dark:     rgba(255, 255, 255, 0.12);

  /* Feedback */
  --positive:           var(--emerald-500);
  --positive-soft:      var(--emerald-50);
  --negative:           var(--ruby-500);
  --negative-soft:      var(--ruby-100);
  --info:               var(--sapphire-500);
  --info-soft:          var(--sapphire-100);
  --warning:            var(--gold-600);
  --warning-soft:       var(--gold-50);
}

/* Fortune Gems Guide — Typography tokens */

:root {
  /* Families */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-xs:   0.75rem;   /* 12px — legal / micro labels */
  --text-sm:   0.875rem;  /* 14px — captions, table meta */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead paragraph */
  --text-lg:   1.375rem;  /* 22px — card titles / h4 */
  --text-xl:   1.75rem;   /* 28px — h3 */
  --text-2xl:  2.25rem;   /* 36px — h2 section */
  --text-3xl:  3rem;      /* 48px — h1 desktop */
  --text-4xl:  3.75rem;   /* 60px — hero display */

  /* Line heights */
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrow / overline */
}

/* Fortune Gems Guide — Spacing, radius, shadow, layout tokens */

:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5.5rem;   /* 88 — section rhythm */

  /* Radius — generous, friendly rounding */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;   /* cards */
  --radius-xl:   28px;   /* feature panels */
  --radius-pill: 999px;

  /* Shadows — soft, low-spread, cool-tinted */
  --shadow-xs:  0 1px 2px rgba(16, 36, 29, 0.06);
  --shadow-sm:  0 2px 8px rgba(16, 36, 29, 0.07);
  --shadow-md:  0 8px 24px rgba(16, 36, 29, 0.09);
  --shadow-lg:  0 18px 48px rgba(16, 36, 29, 0.14);
  --shadow-gold: 0 10px 28px rgba(224, 169, 46, 0.36);
  --shadow-glow: 0 0 0 1px rgba(31, 169, 113, 0.25), 0 0 40px rgba(31, 169, 113, 0.35);

  /* Layout */
  --container:      1200px;
  --container-prose: 760px;
  --header-h:       72px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    400ms; /* @kind other */

  /* Gemstone gradients (subtle, used for accents/visuals) */
  --grad-hero:     radial-gradient(120% 120% at 80% 0%, #0e5b40 0%, #073229 45%, #04231c 100%); /* @kind color */
  --grad-gold:     linear-gradient(135deg, #f4d585 0%, #e0a92e 55%, #c2871c 100%); /* @kind color */
  --grad-emerald:  linear-gradient(135deg, #34bd82 0%, #15875b 100%); /* @kind color */
  --grad-ruby:     linear-gradient(135deg, #f08aa3 0%, #c41d4d 100%); /* @kind color */
  --grad-sapphire: linear-gradient(135deg, #7fa8ee 0%, #1f56bd 100%); /* @kind color */
}

/* Fortune Gems Guide — base element styles & utility primitives.
   Imported by styles.css after the tokens so utilities can use them. */

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

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Reusable primitives ---- */

.fg-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}

.fg-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Eyebrow tinted for dark surfaces */
.fg-eyebrow--ondark { color: var(--brand-on-dark); }