/* ============================================================
   PIVOT POWER — Design Tokens  v0.8.1
   All visual variables live here. Never hardcode values
   in component CSS — always reference a token.

   DEFAULT = light theme (cream).
   Apply class="dark" to any element to flip it to dark mode.
   Nav, footer, and hero use .dark automatically.
   ============================================================ */

:root {

  /* ── BACKGROUNDS (light default) ── */
  --bg:         #F5F3EE;   /* Page base — warm white / cream */
  --bg-2:       #EDEAE3;   /* Subtle lift */
  --bg-3:       #E5E2DB;   /* Section alt */
  --bg-card:    #FFFFFF;   /* Card base */
  --bg-card-2:  #FAFAF8;   /* Card raised */

  /* ── TEXT (dark-on-light default) ── */
  --text:       #1A1A1A;   /* Primary */
  --text-2:     #5A5750;   /* Secondary */
  --text-3:     #9B978F;   /* Muted / labels */

  /* ── GOLD (brand accent — darker for light bg) ── */
  --gold:       #B8860B;
  --gold-hover: #A0740A;
  --gold-dim:   rgba(184, 134, 11, 0.08);
  --gold-glow:  rgba(184, 134, 11, 0.05);
  --gold-border:rgba(184, 134, 11, 0.20);

  /* ── BORDERS ── */
  --border:     rgba(0, 0, 0, 0.07);
  --border-2:   rgba(0, 0, 0, 0.12);

  /* ── STATUS ── */
  --green:      #3D8A5A;
  --green-dim:  rgba(61, 138, 90, 0.10);
  --green-border: rgba(61, 138, 90, 0.25);

  /* ── TYPOGRAPHY ── */
  --font-sans:  'DM Sans', sans-serif;
  --font-serif: 'Instrument Serif', serif;

  /* ── SPACING SCALE ── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* ── RADII ── */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-full: 100px;

  /* ── SHADOWS (lighter for cream bg) ── */
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.10);

  /* ── TRANSITIONS ── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── LAYOUT ── */
  --max-width:  1160px;
  --nav-height: 68px;
}

/* ── DARK SCOPE ──
   Apply class="dark" to any element (nav, footer, hero, section)
   to restore the original dark palette inside that element.
   ──────────────────────────────────────────────────────────── */
.dark {
  --bg:         #0C0E11;
  --bg-2:       #131620;
  --bg-3:       #1A1D26;
  --bg-card:    #16191F;
  --bg-card-2:  #1C2028;

  --text:       #F0EDE8;
  --text-2:     #9B978F;
  --text-3:     #5A5750;

  --gold:       #C8A96E;
  --gold-hover: #D4BA85;
  --gold-dim:   rgba(200, 169, 110, 0.10);
  --gold-glow:  rgba(200, 169, 110, 0.06);
  --gold-border:rgba(200, 169, 110, 0.22);

  --border:     rgba(255, 255, 255, 0.06);
  --border-2:   rgba(255, 255, 255, 0.10);

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg:   0 24px 64px rgba(0, 0, 0, 0.5);

  --green:      #4E9A6A;
  --green-dim:  rgba(78, 154, 106, 0.12);
  --green-border: rgba(78, 154, 106, 0.28);
}