/* ─── EL-CHISMOSO DESIGN TOKENS ─────────────────────── */
:root {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3.2rem,   0.5rem  + 7vw,    7.5rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Easing */
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:                cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --content-default: 1100px;
  --content-narrow:  720px;
  --content-wide:    1300px;

  /* Fonts */
  --font-display: 'Cabinet Grotesk', 'Inter', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;
}

/* ─── COLOR PALETTE ─────────────────────────────────── */
:root {
  --color-bg:        #0a0a0a;
  --color-surface:   #111111;
  --color-surface-2: #181818;
  --color-border:    #242424;
  --color-border-2:  #2e2e2e;

  --color-text:       #ededed;
  --color-text-muted: #aaaaaa;
  --color-text-faint: #777777;

  --color-accent:      #E8423A;
  --color-accent-2:    #FF8C42;
  --color-accent-glow: rgba(232, 66, 58, 0.18);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:   0 16px 48px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 40px rgba(232, 66, 58, 0.15);
}

/* ─── OPTION B: LIGHT CONTENT SURFACES ──────────────── */
:root {
  /* Dark zones: nav, hero, footer stay #0a0a0a */
  --color-dark-zone:    #0d0d0d;
  --color-dark-surface: #161616;
  --color-dark-border:  #2a2a2a;
  --color-dark-text:    #f2f2f2;
  --color-dark-muted:   #aaaaaa;

  /* Light zones: content sections, article cards */
  --color-light-bg:     #f5f3f0;
  --color-light-surf:   #ffffff;
  --color-light-border: #e4e0db;
  --color-light-text:   #1a1a1a;
  --color-light-muted:  #666666;
  --color-light-faint:  #999999;

  /* Light card shadows */
  --shadow-card-light: 0 1px 4px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.05);
}