/* =============================================================
   THE ROMANCE LEDGER — DESIGN TOKENS + BASE
   CoinMarketCap-inspired: crisp, dense, colorful, alive.
   Romance accent: magenta-pink. Crypto-style up/down greens/reds.
   ============================================================= */

:root,
[data-theme='light'] {
  /* Surfaces — crisp white, soft gray surfaces */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafd;
  --color-surface-offset: #eff2f5;
  --color-divider: #eff2f5;
  --color-border: #e6e8eb;
  --color-border-strong: #cfd6e4;

  /* Text */
  --color-text: #0d1421;
  --color-text-muted: #58667e;
  --color-text-faint: #a6b0c3;
  --color-text-inverse: #ffffff;

  /* Accent — rose (romance-coded, joyful, sophisticated) */
  --color-primary: #d6336c;
  --color-primary-hover: #b8285c;
  --color-primary-active: #98204c;
  --color-primary-soft: #fce4ec;
  --color-primary-highlight: #fdedf2;

  /* Secondary accents — for dashboard cards, chips */
  --color-violet: #7c3aed;
  --color-violet-soft: #ede4ff;
  --color-blue: #3861fb;
  --color-blue-soft: #e0e7ff;
  --color-cyan: #11b3c1;
  --color-cyan-soft: #d4f1f4;
  --color-amber: #f7931a;
  --color-amber-soft: #fff0d9;
  --color-coral: #ff6b6b;
  --color-coral-soft: #ffe3e3;
  --color-mint: #16c784;
  --color-mint-soft: #d4f4e6;

  /* Semantic — CMC-style market signals */
  --color-up: #16c784;
  --color-up-soft: #d4f4e6;
  --color-up-bg: #ecfdf5;
  --color-down: #ea3943;
  --color-down-soft: #fde2e4;
  --color-down-bg: #fef2f3;
  --color-flat: #58667e;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 150ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13, 20, 33, 0.04);
  --shadow-md: 0 2px 8px rgba(13, 20, 33, 0.06);
  --shadow-lg: 0 8px 24px rgba(13, 20, 33, 0.08);
  --shadow-card: 0 1px 0 rgba(13, 20, 33, 0.04), 0 0 0 1px var(--color-border);

  --content-narrow: 720px;
  --content-default: 1200px;
  --content-wide: 1440px;
  --maxw: var(--content-default);

  /* Responsive breakpoints (marketing pages):
     640px — shell padding tighten
     720px — 2-col card grids → 1 col
     768px — volume editorial grids
     900px — major layout stacks */

  /* Type scale — tighter, more compact than editorial */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.8125rem;     /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md: 1rem;          /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.5rem;        /* 24px */
  --text-2xl: 2rem;         /* 32px */
  --text-3xl: 2.5rem;       /* 40px */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Horizontal inset for .wrap, page mains, and full-bleed bands */
  --shell-inline: clamp(1.125rem, 4vw, var(--space-6));

}

/* DARK MODE — CMC-style deep slate */
[data-theme='dark'] {
  --color-bg: #0d1421;
  --color-surface: #17202f;
  --color-surface-2: #1a2333;
  --color-surface-offset: #222b3d;
  --color-divider: #222b3d;
  --color-border: #2a3447;
  --color-border-strong: #3b475c;

  --color-text: #eaecef;
  --color-text-muted: #a3a9b8;
  --color-text-faint: #5e6573;
  --color-text-inverse: #0d1421;

  --color-primary: #ec5d8a;
  --color-primary-hover: #f07ea3;
  --color-primary-active: #d6336c;
  --color-primary-soft: #3a1a26;
  --color-primary-highlight: #4a1f30;

  --color-violet: #a78bfa;
  --color-violet-soft: #2a2440;
  --color-blue: #6987fb;
  --color-blue-soft: #1f2745;
  --color-cyan: #4dd4dc;
  --color-cyan-soft: #1a3033;
  --color-amber: #ffaa3a;
  --color-amber-soft: #3a2a14;
  --color-coral: #ff8a8a;
  --color-coral-soft: #3a1f1f;
  --color-mint: #2fd693;
  --color-mint-soft: #1a3328;

  --color-up: #16c784;
  --color-up-soft: #1a3328;
  --color-up-bg: #122821;
  --color-down: #ea3943;
  --color-down-soft: #3a1f22;
  --color-down-bg: #2a1418;
  --color-flat: #a3a9b8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--color-border);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0d1421;
    --color-surface: #17202f;
    --color-surface-2: #1a2333;
    --color-surface-offset: #222b3d;
    --color-divider: #222b3d;
    --color-border: #2a3447;
    --color-text: #eaecef;
    --color-text-muted: #a3a9b8;
    --color-text-faint: #5e6573;
    --color-text-inverse: #0d1421;
    --color-primary: #ec5d8a;
    --color-up: #16c784;
    --color-down: #ea3943;
  }
}

/* =============================================================
   RESET + BASE
   ============================================================= */

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
}

body {
  min-height: 100dvh;
  line-height: 1.5;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-family: var(--font-display);
}

p,
li,
figcaption {
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-interactive);
}

a:hover {
  color: var(--color-primary-hover);
}

::selection {
  background: var(--color-primary-highlight);
  color: var(--color-text);
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a,
button,
[role='button'],
input,
textarea,
select {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.num,
.tabular {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Shared marketing page shell — nav, footer, heroes, sections */
.page-shell,
.wrap {
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--shell-inline);
}

/* Page content rails — match methodology inset on all marketing routes */
.meth-main,
.rs-main,
.bg-main,
.wl-detail,
.bg-kpis,
.bg-closing,
.vol-page {
  padding-inline: var(--shell-inline);
}

/* Closing bands — translucent pink wash over page bg (not off-brand navy) */
.meth-closing,
.bg-closing {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--pink) 14%, var(--bg)),
    color-mix(in srgb, var(--peony) 10%, var(--bg-2))
  );
  border-top: 1px solid color-mix(in srgb, var(--pink) 22%, var(--border));
  color: var(--text);
}