/* Legal Steps — Design Tokens
 * Deep Marine · Warm Paper · Amber Gold · Cool Stone
 * Bewusst kühler, präziser, moderner als das Porta-System.
 */

:root {
  /* -------- Colors -------- */
  --color-ink:            #0B2A3B;  /* Deep Marine — Autorität */
  --color-ink-soft:       #1E3D50;
  --color-ink-muted:      #4E6B7E;
  --color-stone:          #8DA0AE;  /* Sekundär-Text, Divider */
  --color-stone-soft:     #B8C4CD;
  --color-paper:          #F5F1EA;  /* Warmes Papier — Grundton */
  --color-paper-deep:     #ECE5D6;  /* Alternierende Sektionen */
  --color-paper-warm:     #EFE8D8;
  --color-white:          #FFFFFF;
  --color-gold:           #B8863F;  /* Amber Gold — CTA, Fokus, Nummer */
  --color-gold-dark:      #8F6929;
  --color-gold-soft:      #D9B676;
  --color-border:         #DCD3BF;
  --color-border-strong:  #BFB395;
  --color-border-ink:     rgba(11, 42, 59, 0.14);
  --color-selection:      rgba(184, 134, 63, 0.28);

  /* -------- Fluid Typography Scale -------- */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-28: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --fs-36: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  --fs-48: clamp(2rem, 1.55rem + 2.3vw, 3rem);
  --fs-64: clamp(2.5rem, 1.7rem + 3.8vw, 4rem);
  --fs-88: clamp(3rem, 1.9rem + 5.5vw, 5.5rem);
  --fs-120: clamp(4rem, 2.5rem + 7.5vw, 7.5rem);

  /* -------- Line Heights -------- */
  --lh-display: 1.02;
  --lh-heading: 1.14;
  --lh-lead:    1.45;
  --lh-body:    1.6;
  --lh-ui:      1.4;

  /* -------- Letter Spacing -------- */
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-eyebrow: 0.14em;

  /* -------- Spacing (4px base) -------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  /* -------- Radii -------- */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 999px;

  /* -------- Elevation -------- */
  --shadow-soft:    0 1px 2px rgba(11, 42, 59, 0.06);
  --shadow-card:    0 20px 48px -28px rgba(11, 42, 59, 0.22),
                    0 2px 6px -3px rgba(11, 42, 59, 0.08);
  --shadow-lift:    0 34px 70px -32px rgba(11, 42, 59, 0.30),
                    0 4px 12px -6px rgba(11, 42, 59, 0.12);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --focus-ring:     0 0 0 3px rgba(184, 134, 63, 0.42);

  /* -------- Motion -------- */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-swift:     cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:  180ms;
  --dur-med:   320ms;
  --dur-slow:  560ms;

  /* -------- Layout -------- */
  --container:      1240px;
  --container-wide: 1440px;
  --gutter:         clamp(20px, 4vw, 48px);
  --header-h:       76px;
  --announce-h:     40px;
  --preview-h:      40px;

  /* -------- PixelUno Branding (violett, dezent) -------- */
  --color-pixeluno:      #6D28D9;
  --color-pixeluno-dark: #4C1D95;
  --color-pixeluno-soft: rgba(109, 40, 217, 0.28);

  /* -------- Fonts --------
   * Bewusste Wahl gegen die AI-UI-Standardfaces (Inter/Fraunces/Roboto/Geist/...).
   * Instrument Serif + Instrument Sans: gemeinsame Familie, hohe redaktionelle
   * Persönlichkeit, im UI-Feed noch selten.
   */
  --ff-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --ff-body:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}