:root {
  /* =============================================
     Colors
     ============================================= */
  --color-coral-flame: #ef493d;
  --color-coral-glow: #f87a71;
  --color-coral-blush: #fececa;
  --color-ember-deep: #b9271c;
  --color-ember-darker: #7f241d;
  --color-deep-ink: #161c24;
  --color-ink-charcoal: #212b36;
  --color-slate-mid: #454f5b;
  --color-mist-body: #637381;
  --color-cloud-border: #c4cdd5;
  --color-chalk-surface: #dfe3e8;
  --color-warm-parchment: #edeae2;
  --color-ghost-white: #f4f6f8;
  --color-pure-white: #ffffff;
  --color-amber-signal: #ffc107;
  --color-leaf-success: #54d62c;

  /* =============================================
     Typography — Font Families
     ============================================= */
  --font-noto-sans: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-onest: 'Onest', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-pixel: 'Tiny5', ui-sans-serif, sans-serif;

  /* =============================================
     Typography — Scale
     ============================================= */
  /* caption */
  --text-caption: 12px;
  --leading-caption: 1.333;

  /* body-sm */
  --text-body-sm: 14px;
  --leading-body-sm: 1.429;

  /* body */
  --text-body: 16px;
  --leading-body: 1.6;

  /* subheading */
  --text-subheading: 18px;
  --leading-subheading: 1.556;

  /* heading-sm */
  --text-heading-sm: 20px;
  --leading-heading-sm: 1.4;

  /* heading */
  --text-heading: 24px;
  --leading-heading: 1.333;

  /* heading-lg */
  --text-heading-lg: 30px;
  --leading-heading-lg: 1.2;

  /* heading-xl */
  --text-heading-xl: 36px;
  --leading-heading-xl: 1.222;

  /* display-alt */
  --text-display-alt: 48px;
  --leading-display-alt: 1.0;

  /* display */
  --text-display: 64px;
  --leading-display: 1.25;

  /* =============================================
     Typography — Weights
     ============================================= */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* =============================================
     Spacing
     ============================================= */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-96: 96px;

  /* =============================================
     Layout
     ============================================= */
  --page-max-width: 1152px;       /* --container-6xl: 72rem */
  --page-max-width-content: 896px; /* --container-4xl: 56rem */
  --page-max-width-narrow: 768px;  /* --container-3xl: 48rem */
  --section-gap: 96px;
  --card-padding: 24px;
  --element-gap: 16px;

  /* =============================================
     Border Radius — Raw Scale
     ============================================= */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-4xl: 48px;
  --radius-full: 9999px;

  /* =============================================
     Named Radii (by element)
     ============================================= */
  --radius-nav: 8px;
  --radius-tags: 4px;
  --radius-cards: 16px;
  --radius-cards-lg: 24px;
  --radius-inputs: 8px;
  --radius-buttons: 9999px;
  --radius-modals: 32px;
  --radius-images: 16px;

  /* =============================================
     Surfaces
     ============================================= */
  --surface-warm-parchment: #edeae2;  /* Level 0 — base canvas */
  --surface-ghost-white: #f4f6f8;     /* Level 1 — card faces */
  --surface-chalk-surface: #dfe3e8;   /* Level 2 — alt section bands */
  --surface-pure-white: #ffffff;      /* Level 3 — modal/floating */
  --surface-deep-ink: #161c24;        /* Level 4 — dark sections */
  --surface-ember-darker: #7f241d;    /* Level 5 — brand dark accent */

  /* =============================================
     Motion
     ============================================= */
  --ease-default: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
}