/* ==========================================================================
   Asymmetric Investor — redesign mockup · design tokens (L1)
   Naming follows docs/design-system/design-tokens.md convention:
   <category>.<role>.<variant>  ->  --color-surface-bg, --space-comfortable
   No hex literals outside the palette block (DL-V1 Rule 2).
   ========================================================================== */

:root {
  /* ---- palette (the ONLY place hex may appear) ---- */
  --palette-paper:        #FBFAF7;
  --palette-paper-2:      #F4F2ED;
  --palette-paper-3:      #EAE7E0;
  --palette-white:        #FFFFFF;
  --palette-ink:          #16263B;
  --palette-ink-2:        #3D4E63;
  --palette-ink-3:        #6B7A8C;
  --palette-ink-4:        #9AA5B1;
  --palette-rule:         #DDD9D1;
  --palette-rule-strong:  #C4BFB4;
  --palette-brass:        #A87524;
  --palette-brass-soft:   #F5EDDC;
  --palette-green:        #1E6B49;
  --palette-green-soft:   #E4EFE8;
  --palette-amber:        #B5761A;
  --palette-amber-soft:   #FAEEDA;
  --palette-red:          #9C2E22;
  --palette-red-soft:     #F7E4E0;
  --palette-slate-soft:   #ECEFF2;

  /* ---- color.surface.* ---- */
  --color-surface-bg:        var(--palette-paper);
  --color-surface-bg-subtle: var(--palette-paper-2);
  --color-surface-bg-raised: var(--palette-white);
  --color-surface-bg-inverse: var(--palette-ink);
  --color-surface-bg-sunken: var(--palette-paper-3);

  /* ---- color.text.* (WCAG AA against every surface it pairs with) ---- */
  --color-text-primary:   var(--palette-ink);
  --color-text-secondary: var(--palette-ink-2);
  --color-text-tertiary:  var(--palette-ink-3);
  --color-text-disabled:  var(--palette-ink-4);
  --color-text-inverse:   var(--palette-paper);
  --color-text-link:      var(--palette-ink);

  /* ---- color.accent.* ---- */
  --color-accent-primary: var(--palette-brass);
  --color-accent-primary-soft: var(--palette-brass-soft);
  --color-accent-success: var(--palette-green);
  --color-accent-success-soft: var(--palette-green-soft);
  --color-accent-warning: var(--palette-amber);
  --color-accent-warning-soft: var(--palette-amber-soft);
  --color-accent-danger:  var(--palette-red);
  --color-accent-danger-soft: var(--palette-red-soft);
  --color-accent-neutral-soft: var(--palette-slate-soft);

  /* ---- color.border.* ---- */
  --color-border: var(--palette-rule);
  --color-border-strong: var(--palette-rule-strong);

  /* ---- type.family.* ---- */
  --type-family-display: "Newsreader", Georgia, "Times New Roman", serif;
  --type-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-family-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- type.scale.* ---- */
  --type-scale-eyebrow: 0.6875rem;
  --type-scale-caption: 0.75rem;
  --type-scale-small:   0.8125rem;
  --type-scale-body:    0.9375rem;
  --type-scale-body-lg: 1.0625rem;
  --type-scale-h5:      1rem;
  --type-scale-h4:      1.1875rem;
  --type-scale-h3:      1.4375rem;
  --type-scale-h2:      1.875rem;
  --type-scale-h1:      2.5rem;
  --type-scale-display: clamp(2.4rem, 5.2vw, 3.9rem);
  --type-scale-numeral: clamp(2.6rem, 6vw, 4.2rem);

  /* ---- type.weight.* / leading / tracking ---- */
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-leading-tight: 1.16;
  --type-leading-normal: 1.45;
  --type-leading-relaxed: 1.62;
  --type-tracking-tight: -0.015em;
  --type-tracking-normal: 0;
  --type-tracking-wide: 0.09em;

  /* ---- space.* (8 stops, role-named) ---- */
  --space-hairline: 2px;
  --space-dense: 4px;
  --space-compact: 8px;
  --space-comfortable: 16px;
  --space-airy: 24px;
  --space-gutter: 32px;
  --space-section: 56px;
  --space-page: 24px;

  /* ---- radius.* ---- */
  --radius-none: 0;
  --radius-subtle: 3px;
  --radius-rounded: 999px;
  --radius-full: 50%;

  /* ---- motion.* ---- */
  --motion-duration-instant: 80ms;
  --motion-duration-subtle: 160ms;
  --motion-duration-moderate: 280ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- elevation.* ---- */
  --elevation-flat: none;
  --elevation-raised: 0 1px 2px rgba(22, 38, 59, 0.05);
  --elevation-floating: 0 8px 28px rgba(22, 38, 59, 0.11);

  /* ---- layout ---- */
  --layout-max: 1180px;
  --layout-prose: 660px;
}

@media (min-width: 900px) {
  :root {
    --space-page: 40px;
    --space-section: 76px;
  }
}