/* ==========================================================================
   Five Stone Investments — Design Tokens
   Colors, type, spacing, shadows, motion.
   Load this once at the root of any page.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Webfonts — all Google Fonts, substitutions flagged in README                */
/* -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@300..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ========================================================================== */
/*  DESIGN TOKENS                                                              */
/* ========================================================================== */
:root {

  /* ------------------------------------------------------------------------ */
  /*  COLOR — Stones                                                           */
  /*  Warm neutral spine of the brand. 80% of any screen lives here.          */
  /* ------------------------------------------------------------------------ */
  --stone-50:  #FBF7F0;  /* off-white, primary page bg (NOT pure white) */
  --stone-100: #F4EDE0;  /* kraft, section breaks */
  --stone-150: #EBE1D0;  /* card highlight, input bg */
  --stone-200: #DDD1BC;  /* hairline borders */
  --stone-300: #C4B59C;  /* disabled text, muted rules */
  --stone-400: #9B8E77;  /* tertiary text */
  --stone-500: #6F6553;  /* secondary text */
  --stone-600: #4F4939;  /* strong secondary text */
  --stone-700: #363225;  /* body text on light */
  --stone-800: #26241A;  /* deep slate, footer bg */
  --stone-900: #1C1D22;  /* near-black, modals */
  --stone-950: #111216;  /* deepest, rare */

  /* ------------------------------------------------------------------------ */
  /*  COLOR — Ember Clay (primary accent)                                      */
  /*  The red of the napkin sketch. Warm terracotta, for CTAs and accent marks.*/
  /* ------------------------------------------------------------------------ */
  --ember-50:  #FBF0EA;
  --ember-100: #F5DBCD;
  --ember-200: #ECBBA2;
  --ember-300: #DE9577;
  --ember-400: #CB6F4E;
  --ember-500: #B8502F;  /* primary — buttons, links, focus */
  --ember-600: #9C3E22;  /* hover */
  --ember-700: #7D2F1A;  /* press */
  --ember-800: #5C2213;
  --ember-900: #3F170D;

  /* ------------------------------------------------------------------------ */
  /*  COLOR — River Moss (secondary accent)                                    */
  /*  Deep forest green. "Money" + "growth" without cliché green.             */
  /* ------------------------------------------------------------------------ */
  --moss-50:  #EEF2EA;
  --moss-100: #D7DEC8;
  --moss-200: #B2BE9D;
  --moss-300: #8A9A6E;
  --moss-400: #667849;
  --moss-500: #4C5D31;  /* primary moss */
  --moss-600: #3B4A24;
  --moss-700: #2C3818;
  --moss-800: #1F280F;
  --moss-900: #131807;

  /* ------------------------------------------------------------------------ */
  /*  COLOR — Signal (chart + status)                                          */
  /*  Muted, never pure. Price ticks, badges, system messages.                */
  /* ------------------------------------------------------------------------ */
  --signal-up:        #5E8C4E;  /* desaturated green for price up */
  --signal-up-bg:     #E6EDDF;
  --signal-down:      #B4443A;  /* desaturated red for price down */
  --signal-down-bg:   #F3DCD7;
  --signal-flat:      var(--stone-400);
  --signal-info:      #3F6685;  /* rare — only for info toasts */
  --signal-info-bg:   #E0E8EE;
  --signal-warn:      #B57A28;  /* amber for caution */
  --signal-warn-bg:   #F4E4C7;

  /* ------------------------------------------------------------------------ */
  /*  COLOR — Semantic aliases (use these in UI, not raw scale)                */
  /* ------------------------------------------------------------------------ */
  --bg:            var(--stone-50);
  --bg-raised:     #FFFFFF;            /* cards pop slightly over stone-50 */
  --bg-sunken:     var(--stone-100);   /* inputs, section breaks */
  --bg-inverse:    var(--stone-800);

  --fg:            var(--stone-700);   /* body copy */
  --fg-strong:     var(--stone-900);   /* headlines */
  --fg-muted:      var(--stone-500);   /* captions, labels */
  --fg-subtle:     var(--stone-400);   /* hints */
  --fg-disabled:   var(--stone-300);
  --fg-inverse:    var(--stone-50);

  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --border-subtle: var(--stone-150);

  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-press:  var(--ember-700);
  --accent-tint:   var(--ember-50);
  --accent-on:     #FFFFFF;

  --money:         var(--moss-500);
  --money-tint:    var(--moss-50);

  --focus-ring:    var(--ember-500);

  /* ------------------------------------------------------------------------ */
  /*  TYPE — Families                                                          */
  /* ------------------------------------------------------------------------ */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', ui-monospace, monospace;

  /* ------------------------------------------------------------------------ */
  /*  TYPE — Sizes (rem, 16px base)                                            */
  /* ------------------------------------------------------------------------ */
  --text-xs:   0.75rem;    /* 12px — labels, disclaimers */
  --text-sm:   0.875rem;   /* 14px — captions, fine print */
  --text-base: 1rem;       /* 16px — body */
  --text-md:   1.125rem;   /* 18px — lead body */
  --text-lg:   1.25rem;    /* 20px — small headings */
  --text-xl:   1.5rem;     /* 24px — h4 */
  --text-2xl:  2rem;       /* 32px — h3 */
  --text-3xl:  2.75rem;    /* 44px — h2 */
  --text-4xl:  3.75rem;    /* 60px — h1 */
  --text-5xl:  5rem;       /* 80px — display */

  /* ------------------------------------------------------------------------ */
  /*  TYPE — Weights & line heights                                            */
  /* ------------------------------------------------------------------------ */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-mono: 0;

  /* ------------------------------------------------------------------------ */
  /*  SPACING — 8px base                                                       */
  /* ------------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ------------------------------------------------------------------------ */
  /*  RADII                                                                    */
  /* ------------------------------------------------------------------------ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------ */
  /*  SHADOWS — warm-tinted, low contrast                                      */
  /* ------------------------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(47, 40, 28, 0.04), 0 2px 6px rgba(47, 40, 28, 0.05);
  --shadow-2: 0 2px 4px rgba(47, 40, 28, 0.05), 0 8px 20px rgba(47, 40, 28, 0.08);
  --shadow-3: 0 8px 16px rgba(47, 40, 28, 0.08), 0 24px 48px rgba(47, 40, 28, 0.15);
  --shadow-inset: inset 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus-ring);

  /* ------------------------------------------------------------------------ */
  /*  MOTION                                                                   */
  /* ------------------------------------------------------------------------ */
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;

  /* ------------------------------------------------------------------------ */
  /*  LAYOUT                                                                   */
  /* ------------------------------------------------------------------------ */
  --container-max: 1240px;
  --reading-max: 680px;
  --nav-height: 72px;
}

/* ========================================================================== */
/*  BASE — semantic element styles                                             */
/* ========================================================================== */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

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

/* Headings — Fraunces with optical size dialed for display feel.
   'opsz' high + subtle negative tracking + slight softening ('SOFT' axis) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4) 0;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h4 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h5 { font-size: var(--text-lg); letter-spacing: 0; }
h6 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Body copy */
p {
  margin: 0 0 var(--space-4) 0;
  max-width: var(--reading-max);
  text-wrap: pretty;
}
p.lead {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg);
}

/* Links — underline always present, deepens on hover */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard),
              text-decoration-thickness var(--duration-fast) var(--ease-standard);
}
a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Numbers, tickers, code — always mono */
code, kbd, samp, .mono, .ticker, .price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

code {
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

/* Block quotes — editorial pull quote */
blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-style: italic;
  color: var(--fg-strong);
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  max-width: var(--reading-max);
}

/* HR — a thin hairline with optional "stone" centered */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

/* Selection */
::selection {
  background: var(--ember-200);
  color: var(--ember-900);
}

/* Focus-visible default */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ========================================================================== */
/*  UTILITIES                                                                  */
/* ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.reading {
  max-width: var(--reading-max);
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--space-3) 0;
}
.price-up   { color: var(--signal-up); }
.price-down { color: var(--signal-down); }
.price-flat { color: var(--signal-flat); }