/* === Bio Design Tokens ===
   Central source of truth for colors, typography, spacing, and easing.
   Every visual value in the project references these variables.
   No hardcoded values in component CSS. */

:root {
  /* ---- A-side palette (editorial, white-backed) ---- */
  --a-bg:            #f0f0ea;  /* aged paper, low saturation — echoes the sketch's stock */
  --a-text:           #1a1a1a;
  --a-text-secondary: #5c5c5c;
  --a-text-tertiary:  #949494;
  --a-border:         #e5e5e0;
  --a-bg-subtle:      #e9e9e2;

  /* ---- B-side palette (listening room, dark) ---- */
  --b-bg:             #080808;
  --b-text:           #e0e0dc;
  --b-text-secondary: #909090;
  --b-border:         #1e1e1e;

  /* ---- Spectrum colors (B-side accents, physical-optic quality) ---- */
  --spectrum-red:     #d9443a;
  --spectrum-orange:  #d9783a;
  --spectrum-yellow:  #c9a83a;
  --spectrum-green:   #4a8c4f;
  --spectrum-blue:    #3d6da8;
  --spectrum-violet:  #5e4690;

  /* ---- Project tag tokens ---- */
  --tag-invested:     var(--a-text);
  --tag-iced:         #4a4a4a;
  --tag-reviewed:     #8a8a8a;
  --tag-firm:         #b0b0a8;

  /* ---- Typography: 1.25 modular scale ---- */
  --text-xs:   0.75rem;     /* 12px — labels, dates, tags */
  --text-sm:   0.875rem;    /* 14px — auxiliary, footer */
  --text-base: 1rem;        /* 16px — body */
  --text-lg:   1.25rem;     /* 20px — emphasis paragraphs */
  --text-xl:   1.563rem;    /* 25px — section titles */
  --text-2xl:  1.953rem;    /* 31px — panel titles */
  --text-3xl:  2.441rem;    /* 39px — hero name */
  --text-4xl:  3.052rem;    /* 49px — reserved */

  /* ---- Typography: leading ---- */
  --leading-body:    1.7;
  --leading-heading: 1.25;
  --leading-tight:   1.15;

  /* ---- Typography: font stacks ---- */
  --font-cn:    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-en:    -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:  "SF Mono", "Cascadia Code", "Consolas", monospace;

  /* ---- Spacing scale ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ---- Layout ---- */
  --content-max:    680px;
  --content-gutter: 1.5rem;

  /* ---- Easing ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot, subtle */

  /* ---- Durations ---- */
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --dur-xslow:   600ms;
  --dur-transition: 1800ms;

  /* ---- Misc ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:    0ms;
    --dur-normal:  0ms;
    --dur-slow:    0ms;
    --dur-xslow:   0ms;
    --dur-transition: 0ms;
  }
}