/* ============================================================
   Aventurine — base: tokens, reset, typography
   Load order: base.css → components.css → sections.css
   ============================================================ */

:root {
  /* ── Nuetrals ramp — the single neutral source every brand token derives from ── */
  --color-aventurine-50:  #f3f2f2;
  --color-aventurine-100: #e6e6e5;
  --color-aventurine-200: #d0cfcd;
  --color-aventurine-300: #b7b6b3;
  --color-aventurine-400: #9e9d99;
  --color-aventurine-500: #878580;
  --color-aventurine-600: #6c6a66;
  --color-aventurine-700: #51504d;
  --color-aventurine-800: #373634;
  --color-aventurine-900: #1a1a19;
  --color-aventurine-950: #0d0d0c;

  /* ── Accent ramp ── */
  --color-accent-050: #eff6f4;
  --color-accent-100: #dfecea;
  --color-accent-200: #bbd8d2;
  --color-accent-300: #9bc5bd;
  --color-accent-400: #79b2a7;
  --color-accent-500: #5b9f92;
  --color-accent-600: #497e74;
  --color-accent-700: #365e56;
  --color-accent-800: #25413b;
  --color-accent-900: #13201e;
  --color-accent-950: #09100f;

  /* ── Brand tokens — named for what they paint, all derived from the ramps ── */
  /* containers / backgrounds */
  --surface:            var(--color-aventurine-50);    /* page + card ground */
  --surface-2:          var(--color-aventurine-100);   /* sunken / alt ground */
  --surface-inverse:    var(--color-aventurine-900);   /* dark sections, footer, strip */
  --surface-inverse-2:  var(--color-aventurine-800);   /* raised tile on dark */
  /* text */
  --text:               var(--color-aventurine-800);   /* headings + body */
  --text-muted:         var(--color-aventurine-700);   /* secondary / supporting copy */
  --text-light:         var(--color-aventurine-100);   /* light copy on dark grounds / imagery */
  /* lines */
  --border:             rgba(26,26,25,.14);            /* dividers, outlines (aventurine-900 @ 14%) */
  /* accents */
  --accent:             var(--color-accent-600);       /* primary green — buttons, links */
  --accent-strong:      var(--color-accent-900);       /* accent hover / pressed */
  --accent-soft:        var(--color-accent-300);       /* light green — bullets, on-dark accents */
  --accent-soft-2:      var(--color-accent-200);       /* lighter green */

  /* ── Green gradients — restrained tonal shifts within the accent green.
     Used on solid green fills (buttons, active step numbers, pricing card);
     never on charcoal, never on the off-white ground. ── */
  --accent-grad:        linear-gradient(160deg, var(--color-accent-400) 0%, var(--color-accent-500) 48%, var(--color-accent-600) 100%);
  --accent-grad-hover:  linear-gradient(160deg, var(--color-accent-500) 0%, var(--color-accent-600) 58%, var(--color-accent-700) 100%);

  /* ── Off-white texture — faint charcoal paper grain tiled over the surface.
     Dark (charcoal) sections paint over it and stay flat. ── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ── Functional accents — NOT on the green ramp, intentionally kept ── */
  --accent-gold:        #C9A553;   /* gold highlight — focus rings, pricing marks */
  --danger:             #C84B3F;   /* errors, required marks */

  --radius: 8px;
  --maxw: max(1120px, 65vw);   /* content column: 65% of viewport on large screens, never below 1120px; mobile stays fluid */

  /* ── App-true palette (dark product mockups) — also derived from the ramp,
     so surfaces / text track the aventurine identity; gold / red / green / amber
     stay as functional data accents. ── */
  --app-bg:        var(--color-aventurine-950);   /* window / page */
  --app-surface:   var(--color-aventurine-900);   /* cards / panels */
  --app-surface-2: var(--color-aventurine-800);   /* raised inner tile */
  --app-text:      var(--color-aventurine-100);   /* primary */
  --app-text-2:    var(--color-aventurine-300);   /* secondary */
  --app-text-3:    var(--color-aventurine-400);   /* micro labels */
  --app-line:      rgba(255,255,255,.07);         /* hairline divider */
  --app-accent:    var(--color-aventurine-400);   /* primary accent in-app */
  --app-gold:      #c5ac63;                       /* secondary accent / forecast */
  --app-red:       #e2585b;                       /* negative / warning */
  --app-green:     #5ba672;                       /* positive / "good" */
  --app-amber:     #d9a441;                       /* caution mid-band */

  /* Matched to the real app's dark theme (aventurine-app style.css/themes.css):
     chart-1 is the in-app accent (--color-accent-400), chart-2 its pale
     companion series, income the lightened positive used on ledger amounts. */
  --app-chart-1:   #95a95f;   /* chart line / dots — app accent */
  --app-chart-2:   #d2d7c3;   /* companion line (expenses series) */
  --app-income:    #aeb685;   /* positive ledger amounts */
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
img { max-width: 100% }
a { color: inherit }

/* ---------- page ground & typography ---------- */
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background-color: var(--surface);
  background-image: var(--grain);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent-soft); color: var(--surface-inverse) }

/* headings use the display face */
h1, h2, h3 {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

/* emphasis — one treatment site-wide: upright, painted with a green sweep */
em {
  font-style: normal;
  background: linear-gradient(135deg, var(--color-accent-200), var(--color-accent-400), var(--color-accent-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px }