/* ============================================================
   DESIGN TOKENS — variables.css
   ============================================================ */

:root {
  /* Palette — deep charcoal */
  --color-bg:           #1C1B18;
  --color-bg-2:         #232220;
  --color-bg-3:         #2A2927;
  --color-ink:          #F5F3EE;
  --color-ink-2:        #E0DDD6;
  --color-ink-3:        #B0ADA6;
  --color-ink-4:        #787470;
  --color-white:        #FFFFFF;
  --color-black:        #0A0908;

  /* Single accent — terracotta */
  --color-accent:       #C4784A;
  --color-accent-light: #D9956A;
  --color-accent-dim:   rgba(196,120,74,0.12);

  /* Borders */
  --color-border:        rgba(242,239,232,0.07);
  --color-border-strong: rgba(242,239,232,0.14);
  --color-border-hover:  rgba(242,239,232,0.26);

  /* Surfaces */
  --color-surface:   #232220;
  --color-surface-2: #2A2927;
  --color-overlay:   rgba(18,17,14,0.88);

  /* Legacy aliases */
  --color-text:       var(--color-ink);
  --color-text-muted: var(--color-ink-2);
  --color-text-dim:   var(--color-ink-3);

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', 'Arial', sans-serif;

  /* Font sizes */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.4375rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.5rem;
  --text-5xl:  5rem;
  --text-6xl:  7rem;
  --text-7xl:  10rem;
  --text-8xl:  14rem;

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight:  1.0;
  --leading-snug:   1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.20em;

  /* 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;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Layout */
  --container-max:  1400px;
  --container-wide: 1200px;
  --container-text: 680px;
  --gutter:         clamp(1.5rem, 5vw, 4rem);

  /* Borders */
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --border-thin: 1px solid var(--color-border);

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(10,9,8,0.2);
  --shadow-md: 0 4px 24px rgba(10,9,8,0.3);
  --shadow-lg: 0 16px 64px rgba(10,9,8,0.4);

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  600ms;
  --duration-xslow: 1000ms;

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-cursor:  250;
  --z-modal:   300;

  /* Header */
  --header-height: 56px;

  /* Consistent section padding — used across ALL pages */
  --section-pad: clamp(2.5rem, 5vw, 4rem);
}