/* base.css — reset, design tokens, typography */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
img, canvas, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

:root {
  /* --- light palette (default) --- */
  --bg:        #f6f4f0;
  --surface:   #ffffff;
  --surface-2: #efece6;
  --surface-3: #e5e1d9;
  --text:      #16140f;
  --text-2:    #57524a;
  --text-3:    #8b857a;
  --border:    #e0dbd2;
  --border-2:  #cdc7bb;

  --accent:    #9a6600;
  --accent-2:  #c98a12;
  --accent-bg: #f7edd8;

  --up:        #0e7a58;
  --up-bg:     #dcf0e8;
  --down:      #c0410b;
  --down-bg:   #fae3d8;

  --grid:      rgba(0,0,0,.055);
  --shadow:    0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.07), 0 24px 60px rgba(0,0,0,.10);

  /* session tints */
  --s-asia:    #6366f1;
  --s-london:  #0ea5e9;
  --s-overlap: #f59e0b;
  --s-ny:      #ec4899;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --rail-w: 268px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0d0e11;
    --surface:   #15171c;
    --surface-2: #1c1f26;
    --surface-3: #252932;
    --text:      #e9e7e2;
    --text-2:    #a3a099;
    --text-3:    #6d6b64;
    --border:    #272b33;
    --border-2:  #363b45;

    --accent:    #f0b429;
    --accent-2:  #ffcc4d;
    --accent-bg: #2a2113;

    --up:        #2dd4a7;
    --up-bg:     #10302a;
    --down:      #f8785a;
    --down-bg:   #37201b;

    --grid:      rgba(255,255,255,.05);
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --bg:        #0d0e11;
  --surface:   #15171c;
  --surface-2: #1c1f26;
  --surface-3: #252932;
  --text:      #e9e7e2;
  --text-2:    #a3a099;
  --text-3:    #6d6b64;
  --border:    #272b33;
  --border-2:  #363b45;

  --accent:    #f0b429;
  --accent-2:  #ffcc4d;
  --accent-bg: #2a2113;

  --up:        #2dd4a7;
  --up-bg:     #10302a;
  --down:      #f8785a;
  --down-bg:   #37201b;

  --grid:      rgba(255,255,255,.05);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.5);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- type scale --- */
h1, h2, h3, h4 { line-height: 1.18; font-weight: 640; letter-spacing: -.021em; }
h1 { font-size: clamp(1.85rem, 1.3rem + 2.1vw, 2.9rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.05vw, 1.75rem); letter-spacing: -.018em; }
h3 { font-size: 1.06rem; font-weight: 620; letter-spacing: -.012em; }

p { max-width: 68ch; }
p + p { margin-top: .85em; }

b, strong { font-weight: 620; color: var(--text); }
em { font-style: normal; color: var(--accent); font-weight: 560; }

a { color: var(--accent); text-underline-offset: 2px; }

code, .num, kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: .9em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .715rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}

.lede {
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 62ch;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #000; padding: .6rem 1rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}