/* ==========================================================================
   TOKENS.CSS — Design System Custom Properties
   Adjoa Adjei-Ntow Personal Website
   ========================================================================== */

:root {

  /* ─── Color Palette ─────────────────────────────────────────────────── */
  --cream:        #F5EFE3;
  --warm-beige:   #E8DCC8;
  --sand:         #C9B494;
  --tan:          #A08060;
  --brown:        #6B4C2A;
  --espresso:     #2C1A0E;
  --white-smoke:  #FAFAF7;
  --accent-gold:  #C9A84C;

  /* ─── Typography ────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ─── Type Scale ────────────────────────────────────────────────────── */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */
  --text-2xl:  1.5rem;    /*  24px */
  --text-3xl:  1.875rem;  /*  30px */
  --text-4xl:  2.25rem;   /*  36px */
  --text-5xl:  3rem;      /*  48px */
  --text-6xl:  3.75rem;   /*  60px */
  --text-7xl:  4.5rem;    /*  72px */
  --text-8xl:  6rem;      /*  96px */
  --text-9xl:  8rem;      /* 128px */

  /* ─── 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;
  --space-48:  12rem;

  /* ─── Border Radius ─────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  /* ─── Transitions ───────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;
  --transition-slower: 900ms ease;

  /* ─── Z-Index Scale ─────────────────────────────────────────────────── */
  --z-behind:  -1;
  --z-base:     0;
  --z-above:    10;
  --z-nav:      100;
  --z-overlay:  200;
  --z-modal:    300;

  /* ─── Shadows ───────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(44, 26, 14, 0.08);
  --shadow-md:  0 4px 16px rgba(44, 26, 14, 0.12);
  --shadow-lg:  0 8px 32px rgba(44, 26, 14, 0.18);
  --shadow-xl:  0 16px 48px rgba(44, 26, 14, 0.24);

  /* ─── Layout ────────────────────────────────────────────────────────── */
  --max-width:      1280px;
  --content-width:  900px;
  --nav-height:     72px;

  /* ─── Grain overlay opacity ─────────────────────────────────────────── */
  --grain-opacity: 0.04;
}