/* ------------------------------------------------------------------
   Álvaro Otero — Design Tokens
   Fuente: otero-campos-design-tokens.md §10 (2026-08-24)
   ------------------------------------------------------------------ */

:root {
  /* ---- Colour ---- */
  --color-bg:              #F5F5F5;
  --color-surface-cream:   #F8F4E6;
  --color-surface-grey:    #E9E9E9;
  --color-surface-white:   #FFFFFF;
  --color-accent:          #8EC7E2;
  --color-accent-yellow:   #F7CA50;
  --color-ink:             #000000;
  --color-ink-soft:        #1E1E1F;
  --color-ink-alt:         #151515;
  --color-text-muted:      #4D4D4D;
  --color-text-faint:      #999999;
  --color-on-dark:         #FFFFFF;
  --color-border-hairline: rgba(0, 0, 0, 0.08);

  /* ---- Type families ---- */
  --font-display:  "Figtree", system-ui, sans-serif;
  --font-body:     "Geist", system-ui, sans-serif;
  --font-mono:     "Geist Mono", ui-monospace, monospace;
  --font-mono-alt: "PT Mono", ui-monospace, monospace;
  --font-note:     "Cousine", ui-monospace, monospace;

  /* ---- Type sizes ---- */
  --text-hero:     72px;
  --text-xl:       60px;
  --text-lg:       48px;
  --text-title:    22px;
  --text-title-sm: 20px;
  --text-lead:     18px;
  --text-body:     15px;
  --text-sm:       14px;
  --text-xs:       13px;
  --text-2xs:      12px;
  --text-ornament: 120px;

  /* ---- Line heights ---- */
  --leading-display: 1.1;
  --leading-lead:    1.35;
  --leading-body:    1.33;
  --leading-sm:      1.43;

  /* ---- Tracking ---- */
  --tracking-display: -0.05em;
  --tracking-body:    -0.5px;

  /* ---- Spacing ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---- Radii ---- */
  --radius-xs:   4px;
  --radius-sm:   12px;
  --radius-lg:   22px;
  --radius-full: 1000px;

  /* ---- Layout ---- */
  --layout-max:     1360px;
  --layout-content: 1280px;
  --layout-gutter:  40px;
  --grid-gap:       16px;
  --measure-statement: 900px;
  --measure-heading:   800px;
  --measure-lead:      520px;
  --measure-body:      460px;

  /* ---- Effects ---- */
  --shadow-page: 0 1px 3px 0 rgba(0, 0, 0, 0.06);

  /* ---- Component ---- */
  --button-height:    44px;
  --button-height-lg: 52px;
  --chip-size:        30px;
  --chip-size-lg:     34px;
}