/* ============================================================
   THE INCOME ALCHEMY — Design Tokens
   Brand Identity: Playfair Display + Inter
   Palette: Parchment / Charcoal / Gold / Teal
   ============================================================ */

:root {
  /* ── Colors ── */
  --parchment:      #F6F2E8;
  --parchment-mid:  #EDE7D0;
  --parchment-deep: #E0D9C3;
  --charcoal:       #121212;
  --charcoal-soft:  #1E1E1E;
  --charcoal-mid:   #2A2A2A;
  --ink:            #333333;
  --smoke:          #6B6560;
  --mist:           #9A9490;
  --gold:           #C9A24A;
  --gold-light:     #D9B86A;
  --gold-pale:      rgba(201, 162, 74, 0.12);
  --teal:           #1E6B6A;
  --teal-light:     #278888;
  --teal-pale:      rgba(30, 107, 106, 0.1);
  --border:         #DDD8C8;
  --border-light:   #EAE5D6;
  --surface:        #FFFFFF;
  --surface-warm:   #FDFAF3;

  /* ── Typography ── */
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  /* ── Type Scale ── */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.1875rem;  /* 19px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */

  /* ── 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;

  /* ── Borders & Radius ── */
  --radius-sm:  3px;
  --radius-md:  5px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-fast: 0.15s ease;
  --ease-base: 0.22s ease;
  --ease-slow: 0.35s ease;

  /* ── Container ── */
  --container: 1120px;
  --container-sm: 720px;
  --container-xs: 560px;

  /* ── Section padding ── */
  --section-y: var(--space-24);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --parchment:      #0E0D0B;
  --parchment-mid:  #161410;
  --parchment-deep: #1C1916;
  --charcoal:       #F0EDE4;
  --charcoal-soft:  #E2DDD4;
  --charcoal-mid:   #C8C2B4;
  --ink:            #ADA89C;
  --smoke:          #7A756E;
  --mist:           #5A5550;
  --border:         #2A2620;
  --border-light:   #221F19;
  --surface:        #1A1714;
  --surface-warm:   #141210;
  --teal-pale:      rgba(39, 136, 136, 0.15);
  --gold-pale:      rgba(201, 162, 74, 0.1);
}