/* ============================================================
   Trade Ledger Pro — main.css
   Design tokens (inlined, self-contained — no external imports),
   reset, base elements and core typography.
   Load order: main → components → utilities → pages → responsive
   ============================================================ */

:root {
  /* ---- Brand gold (primary) ---- */
  --gold-50:  #FFFBEA;
  --gold-100: #FEF6D5;
  --gold-200: #FDECA8;
  --gold-300: #FADE73;
  --gold-400: #F7CB3C;
  --gold-500: #F5B301;
  --gold-600: #D89A00;
  --gold-700: #A87700;

  /* ---- Ink / neutrals ---- */
  --ink-950: #0A0A0A;
  --ink-900: #171717;
  --ink-700: #3A3A3A;
  --ink-500: #6B6B6B;
  --ink-400: #8E8E93;
  --ink-300: #C7C7CC;
  --ink-200: #E6E6E8;
  --ink-100: #F0F0F1;
  --ink-50:  #F7F7F7;
  --white:   #FFFFFF;

  /* ---- Semantic hues (glyph + tint pairs) ---- */
  --green-500: #31AD67;  --green-tint: #E4F5EC;
  --blue-500:  #3E6FCC;  --blue-tint:  #E0EEFF;
  --amber-500: #D58526;  --amber-tint: #FFEAD4;
  --red-500:   #CC2B35;  --red-tint:   #FFDEE2;

  /* Surfaces */
  --surface-app:        var(--ink-50);
  --surface-card:       var(--white);
  --surface-inset:      var(--ink-100);
  --surface-inverse:    var(--ink-950);
  --surface-brand:      var(--gold-500);
  --surface-brand-soft: var(--gold-100);

  /* Text */
  --text-primary:     var(--ink-950);
  --text-secondary:   var(--ink-500);
  --text-muted:       var(--ink-400);
  --text-on-brand:    var(--ink-950);
  --text-on-inverse:  var(--white);
  --text-inverse-dim: rgba(255,255,255,0.62);
  --text-brand:       var(--gold-600);

  /* Lines & borders */
  --border-hairline:  var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-inverse:   rgba(255,255,255,0.14);

  /* Interactive */
  --focus-ring:       rgba(245,179,1,0.45);

  /* ---- Typography ---- */
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: var(--font-ui);
  --fs-display: 34px;
  --fs-title:   28px;
  --fs-heading: 20px;
  --fs-value:   22px;
  --fs-body:    16px;
  --fs-label:   15px;
  --fs-caption: 13px;
  --fs-overline: 11px;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.45;
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-overline: 0.06em;

  /* ---- Corner radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card:   0 1px 3px rgba(17,17,17,0.05), 0 6px 16px rgba(17,17,17,0.04);
  --shadow-raised: 0 4px 12px rgba(17,17,17,0.08), 0 12px 28px rgba(17,17,17,0.06);
  --shadow-fab:    0 6px 16px rgba(245,179,1,0.38);
  --shadow-hero:   0 10px 30px rgba(10,10,10,0.28);
  --shadow-focus:  0 0 0 3px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);

  /* ---- Layout ---- */
  --maxw: 1140px;
  --gut: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background: var(--surface-app);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: var(--lh-body);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-200); }

/* Core typography helpers */
.eyebrow {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-brand);
}
h1, h2, h3 { letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.section-title {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: var(--fw-heavy);
  line-height: 1.08;
  max-width: 18ch;
}
.section-sub {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text-secondary);
  max-width: 54ch;
  margin-top: 16px;
  line-height: 1.55;
}
.section-head { margin-bottom: 52px; }
.section-head.center { text-align: center; }
.section-head.center .section-title,
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

section { padding: clamp(72px, 9vw, 128px) 0; }

/* Layout container */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.hair { border: 0; border-top: 1px solid var(--border-hairline); }

/* Grids */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* Tinted icon circles (semantic hues) */
.ic-green { background: var(--green-tint); color: var(--green-500); }
.ic-blue  { background: var(--blue-tint);  color: var(--blue-500); }
.ic-amber { background: var(--amber-tint); color: var(--amber-500); }
.ic-red   { background: var(--red-tint);   color: var(--red-500); }
.ic-gold  { background: var(--gold-100);   color: var(--gold-600); }

/* Scroll reveal */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .6s var(--ease-standard), transform .6s var(--ease-standard);
}
.reveal.in { opacity: 1; transform: none; }