/* The Embodied Trader — token bundle
 * Concatenated verbatim from the Claude Design system (project f32d0a3d):
 * fonts + colors + typography + spacing + effects.
 * This is the site's CSS source of record. Design is the source of truth —
 * when tokens change in the design, they change here (and in design-tokens.md).
 */

/* ============================================================ FONTS */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:wght@400;500;600&display=swap');

/* ============================================================ COLOUR
 * Two modes, one identity. Pick one per section; never mix daybreak + obsidian in a frame. */
:root {
  /* ── Base palette (locked) ── */
  --et-amber: #D06B41;     /* warm terracotta accent / CTA glow (v1.1, calmed from #E8743B) */
  --et-sun: #D98C3F;       /* golden-hour gold (daybreak) */
  --et-mist: #F5E3C3;      /* pale cream — light bg / body on dark */
  --et-earth: #2B2421;     /* deep shadow — text on light */
  --et-obsidian: #0A0A0C;  /* near-black base background */
  --et-ink: #14141A;       /* raised black — cards on dark */
  --et-gold: #F2B441;      /* meditation gold — hero accent */
  --et-flare: #FFD27A;     /* bright gold — glints, emphasis */
  --et-haze: #B8A98E;      /* muted warm taupe — secondary/caption */

  /* ── Derived neutrals (oklch-harmonised) ── */
  --et-cream: #FBF4E6;
  --et-ink-2: #1C1C24;
  --et-amber-deep: #B85C36;
  --et-amber-bright: #EC7A3E;
  --et-gold-deep: #D89A2E;

  /* ── Alpha helpers (channel triplets for rgb(... / a)) ── */
  --et-earth-rgb: 43 36 33;
  --et-mist-rgb: 245 227 195;
  --et-gold-rgb: 242 180 65;
  --et-amber-rgb: 208 107 65;
  --et-flare-rgb: 255 210 122;
  --et-haze-rgb: 184 169 142;

  /* ── Semantic aliases — default to Obsidian (the brand's resting state) ── */
  --et-surface: var(--et-obsidian);
  --et-surface-raised: var(--et-ink);
  --et-surface-overlay: var(--et-ink-2);
  --et-border: rgb(var(--et-mist-rgb) / 0.10);
  --et-border-strong: rgb(var(--et-gold-rgb) / 0.28);
  --et-text-heading: var(--et-gold);
  --et-text-emphasis: var(--et-flare);
  --et-text-body: var(--et-mist);
  --et-text-muted: var(--et-haze);
  --et-accent: var(--et-amber);
  --et-accent-hover: var(--et-amber-deep);
  --et-on-accent: var(--et-obsidian);
}

[data-mode="obsidian"] {
  --et-surface: var(--et-obsidian);
  --et-surface-raised: var(--et-ink);
  --et-surface-overlay: var(--et-ink-2);
  --et-border: rgb(var(--et-mist-rgb) / 0.10);
  --et-border-strong: rgb(var(--et-gold-rgb) / 0.28);
  --et-text-heading: var(--et-gold);
  --et-text-emphasis: var(--et-flare);
  --et-text-body: var(--et-mist);
  --et-text-muted: var(--et-haze);
  --et-accent: var(--et-amber-bright);
  --et-accent-hover: var(--et-amber);
  --et-on-accent: var(--et-obsidian);
}

[data-mode="daybreak"] {
  --et-surface: var(--et-mist);
  --et-surface-raised: var(--et-cream);
  --et-surface-overlay: var(--et-cream);
  --et-border: rgb(var(--et-earth-rgb) / 0.12);
  --et-border-strong: rgb(var(--et-amber-rgb) / 0.40);
  --et-text-heading: var(--et-earth);
  --et-text-emphasis: var(--et-amber);
  --et-text-body: var(--et-earth);
  --et-text-muted: rgb(var(--et-earth-rgb) / 0.60);
  --et-accent: var(--et-amber);
  --et-accent-hover: var(--et-amber-deep);
  --et-on-accent: var(--et-earth);
}

/* ============================================================ TYPOGRAPHY */
:root {
  --et-voice: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --et-base: 'Montserrat', system-ui, -apple-system, sans-serif;

  --et-w-display: 600;
  --et-w-headline: 600;
  --et-w-subhead: 500;
  --et-w-body: 400;
  --et-w-caption: 500;

  --et-lh-tight: 1.05;
  --et-lh-snug: 1.2;
  --et-lh-normal: 1.4;

  --et-tracking-tight: -0.01em;
  --et-tracking-caption: 0.04em;
  --et-tracking-eyebrow: 0.18em;

  --et-size-display: 4rem;
  --et-size-headline: 2.5rem;
  --et-size-subhead: 1.75rem;
  --et-size-body: 1.125rem;
  --et-size-caption: 0.875rem;

  --et-fs-display: 110px;
  --et-fs-headline: 68px;
  --et-fs-subhead: 48px;
  --et-fs-body: 36px;
  --et-fs-caption: 26px;
}

.et-display  { font: var(--et-w-display) var(--et-size-display)/var(--et-lh-tight) var(--et-voice); letter-spacing: var(--et-tracking-tight); }
.et-headline { font: var(--et-w-headline) var(--et-size-headline)/var(--et-lh-tight) var(--et-voice); }
.et-subhead  { font: var(--et-w-subhead) var(--et-size-subhead)/var(--et-lh-snug) var(--et-voice); }
.et-body     { font: var(--et-w-body) var(--et-size-body)/var(--et-lh-normal) var(--et-base); }
.et-caption  { font: var(--et-w-caption) var(--et-size-caption)/var(--et-lh-normal) var(--et-base); letter-spacing: var(--et-tracking-caption); }
.et-eyebrow  {
  font: var(--et-w-caption) var(--et-size-caption)/1 var(--et-base);
  letter-spacing: var(--et-tracking-eyebrow);
  text-transform: uppercase;
}

/* ============================================================ SPACING / RADII / LAYOUT */
:root {
  --et-space-1: 4px;   --et-space-2: 8px;   --et-space-3: 12px;  --et-space-4: 16px;
  --et-space-5: 24px;  --et-space-6: 32px;  --et-space-7: 48px;  --et-space-8: 64px;
  --et-space-9: 96px;  --et-space-10: 128px; --et-space-11: 160px; --et-space-12: 224px;

  --et-radius-none: 0;
  --et-radius-sm: 4px;
  --et-radius-chip: 6px;
  --et-radius-md: 8px;
  --et-radius-control: 12px;
  --et-radius-lg: 16px;
  --et-radius-pill: 999px;

  --et-hairline: 1px;

  --et-container: 1200px;
  --et-measure: 64ch;
  --et-measure-tight: 40ch;
}

/* ============================================================ EFFECTS: glow, shadow, grain, motion */
:root {
  --et-glow-sm: 0 0 24px rgb(var(--et-gold-rgb) / 0.35);
  --et-glow-md: 0 0 56px rgb(var(--et-gold-rgb) / 0.32), 0 0 18px rgb(var(--et-flare-rgb) / 0.30);
  --et-glow-lg: 0 0 120px rgb(var(--et-gold-rgb) / 0.28), 0 0 44px rgb(var(--et-flare-rgb) / 0.30);
  --et-glow-cta: 0 0 0 1px rgb(var(--et-amber-rgb) / 0.35), 0 14px 40px rgb(var(--et-amber-rgb) / 0.32);

  --et-wash-obsidian: radial-gradient(120% 90% at 50% 18%, #16121A 0%, var(--et-obsidian) 58%, #050506 100%);
  --et-wash-daybreak: radial-gradient(120% 110% at 50% 0%, #FFF7EC 0%, #FBE7CE 45%, #F6D9B4 100%);
  --et-wash-gold-core: radial-gradient(circle at 50% 50%, var(--et-flare) 0%, var(--et-gold) 22%, rgb(var(--et-gold-rgb) / 0) 70%);

  --et-shadow-soft: 0 2px 8px rgb(var(--et-earth-rgb) / 0.06), 0 24px 64px rgb(var(--et-earth-rgb) / 0.10);
  --et-shadow-raised: 0 1px 2px rgb(var(--et-earth-rgb) / 0.10), 0 40px 90px rgb(var(--et-earth-rgb) / 0.16);
  --et-shadow-dark: 0 30px 80px rgb(0 0 0 / 0.55);

  --et-grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --et-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --et-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --et-dur-fast: 240ms;  --et-dur: 420ms;  --et-dur-slow: 720ms;
}

.et-grain::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--et-grain-url); background-size: 160px 160px;
  opacity: 0.06; mix-blend-mode: overlay; pointer-events: none;
}
.et-haze-vignette { box-shadow: inset 0 0 200px 40px rgb(0 0 0 / 0.45); }

:root                  { --et-card-shadow: var(--et-shadow-dark); }
[data-mode="obsidian"] { --et-card-shadow: var(--et-shadow-dark); }
[data-mode="daybreak"] { --et-card-shadow: var(--et-shadow-soft); }

@keyframes et-breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.035); }
}
@keyframes et-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --et-dur-fast: 1ms; --et-dur: 1ms; --et-dur-slow: 1ms; }
}

/* ── Buttons (resolved from the design-system Button component) ──
 * Orange fill = var(--et-accent), which is bright orange on obsidian and
 * terracotta on daybreak, so one class adapts per section mode. */
.et-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--et-base); font-weight: 500; letter-spacing: 0.01em; line-height: 1;
  border-radius: var(--et-radius-control); border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: background var(--et-dur-fast) var(--et-ease), border-color var(--et-dur-fast) var(--et-ease), box-shadow var(--et-dur-fast) var(--et-ease);
}
.et-btn--sm { padding: 9px 18px;  font-size: 0.8125rem; gap: 7px; }
.et-btn--md { padding: 13px 26px; font-size: 0.9375rem; gap: 9px; }
.et-btn--lg { padding: 17px 36px; font-size: 1.0625rem; gap: 11px; }
.et-btn--full { width: 100%; }
.et-btn--primary { background: var(--et-accent); color: var(--et-on-accent); box-shadow: 0 8px 24px rgb(var(--et-amber-rgb) / 0.18); }
.et-btn--primary:hover { background: var(--et-accent-hover); box-shadow: var(--et-glow-cta); }
.et-btn--glow { box-shadow: var(--et-glow-cta); }
.et-btn--secondary { background: transparent; color: var(--et-text-heading); border-color: var(--et-border-strong); }
.et-btn--secondary:hover { background: rgb(var(--et-gold-rgb) / 0.10); }

/* ── Worksheet field (the pattern-page textareas) ── */
.et-field {
  width: 100%; box-sizing: border-box;
  font-family: var(--et-base); font-size: 15px; line-height: 1.5;
  color: var(--et-earth); background: var(--et-cream);
  border: 1px solid var(--et-border); border-radius: var(--et-radius-control);
  padding: 13px 16px; outline: none; resize: vertical;
  transition: border-color var(--et-dur-fast) var(--et-ease), box-shadow var(--et-dur-fast) var(--et-ease);
}
.et-field:focus { border-color: var(--et-amber); box-shadow: 0 0 0 3px rgb(var(--et-amber-rgb) / 0.16); }

/* Print: drop the fixed nav and anything marked no-print (pattern worksheets) */
@media print {
  #et-nav, .no-print { display: none !important; }
}