/* ============================================================
   AIM · Per-Page Palette Exploration (BD24)
   ------------------------------------------------------------
   Loaded AFTER styles.css. Each palette is scoped to
   body[data-palette="<name>"] so the default styles.css tokens
   stay untouched. To roll a palette out site-wide later, copy
   that block's values back into :root in styles.css and delete
   this file.
   ============================================================ */

/* ─── Paper · index.html ──────────────────────────────────────
   Identical to the current :root defaults — codified here so the
   home page is explicitly tagged for the side-by-side review.
   ============================================================ */
body[data-palette="paper"] {
  --bg:        #EFE9DB;
  --bg-2:      #E6DFCD;
  --bg-3:      #DDD4BE;
  --panel:     #EAE3D3;
  --panel-2:   #E2DACA;

  --ink:       #1A1715;
  --ink-2:     #5A5048;
  --ink-3:     #8A7F70;
  --ink-4:     rgba(26,23,21,0.30);
  --ink-5:     rgba(26,23,21,0.10);

  --line:      rgba(26,23,21,0.08);
  --line-2:    rgba(26,23,21,0.18);

  --accent:        #0091ff;
  --accent-2:      #0077d4;
  --accent-ink:    #FBF6EC;
  --accent-soft:   rgba(0,145,255,0.07);
  --accent-line:   rgba(0,145,255,0.30);
  --accent-glow:   rgba(0,145,255,0.16);
}

/* ─── Midnight · services.html ────────────────────────────────
   Deep blue-charcoal dark mode with refined amber accent.
   ============================================================ */
body[data-palette="midnight"] {
  --bg:        #0E1219;
  --bg-2:      #141923;
  --bg-3:      #1B2230;
  --panel:     #161C27;
  --panel-2:   #1E2533;

  --ink:       #F1ECE0;
  --ink-2:     #B5AEA0;
  --ink-3:     #7B7567;
  --ink-4:     rgba(241,236,224,0.30);
  --ink-5:     rgba(241,236,224,0.10);

  --line:      rgba(241,236,224,0.08);
  --line-2:    rgba(241,236,224,0.18);

  --accent:        #E0A85B;
  --accent-2:      #C28E45;
  --accent-ink:    #0E1219;
  --accent-soft:   rgba(224,168,91,0.10);
  --accent-line:   rgba(224,168,91,0.35);
  --accent-glow:   rgba(224,168,91,0.18);
}
body[data-palette="midnight"] .site-header {
  background: rgba(14,18,25,0.86);
}
body[data-palette="midnight"] .bg-grid {
  background-image: radial-gradient(rgba(241,236,224,0.10) 1px, transparent 1px);
}

/* ─── Forest · how-it-works.html ──────────────────────────────
   British-racing-green ink on parchment with copper accent.
   ============================================================ */
body[data-palette="forest"] {
  --bg:        #F0EBDD;
  --bg-2:      #E5DECB;
  --bg-3:      #D8D0BA;
  --panel:     #EBE4D2;
  --panel-2:   #DFD7C2;

  --ink:       #13251C;
  --ink-2:     #3B5446;
  --ink-3:     #6B7E70;
  --ink-4:     rgba(19,37,28,0.30);
  --ink-5:     rgba(19,37,28,0.10);

  --line:      rgba(19,37,28,0.10);
  --line-2:    rgba(19,37,28,0.20);

  --accent:        #A65A2C;
  --accent-2:      #8A4621;
  --accent-ink:    #F4EFE1;
  --accent-soft:   rgba(166,90,44,0.08);
  --accent-line:   rgba(166,90,44,0.35);
  --accent-glow:   rgba(166,90,44,0.18);
}
body[data-palette="forest"] .site-header {
  background: rgba(240,235,221,0.86);
}
body[data-palette="forest"] .bg-grid {
  background-image: radial-gradient(rgba(19,37,28,0.15) 1px, transparent 1px);
}

/* ─── Slate · projects.html ───────────────────────────────────
   Concrete-grey neutrals with vivid teal accent. Industrial.
   ============================================================ */
body[data-palette="slate"] {
  --bg:        #ECEEF0;
  --bg-2:      #DDE1E5;
  --bg-3:      #CDD3D8;
  --panel:     #E4E7EA;
  --panel-2:   #D5DADE;

  --ink:       #161A1F;
  --ink-2:     #475058;
  --ink-3:     #78828B;
  --ink-4:     rgba(22,26,31,0.30);
  --ink-5:     rgba(22,26,31,0.10);

  --line:      rgba(22,26,31,0.08);
  --line-2:    rgba(22,26,31,0.18);

  --accent:        #147A78;
  --accent-2:      #0F6361;
  --accent-ink:    #ECEEF0;
  --accent-soft:   rgba(20,122,120,0.08);
  --accent-line:   rgba(20,122,120,0.35);
  --accent-glow:   rgba(20,122,120,0.16);
}
body[data-palette="slate"] .site-header {
  background: rgba(236,238,240,0.86);
}
body[data-palette="slate"] .bg-grid {
  background-image: radial-gradient(rgba(22,26,31,0.13) 1px, transparent 1px);
}

/* ─── Bronze · contact.html ───────────────────────────────────
   Oxblood-brown ink on champagne with muted gold accent.
   ============================================================ */
body[data-palette="bronze"] {
  --bg:        #F2ECDE;
  --bg-2:      #E7DFCD;
  --bg-3:      #DCD2BC;
  --panel:     #EDE6D4;
  --panel-2:   #E2DAC6;

  --ink:       #3A1F18;
  --ink-2:     #6B4438;
  --ink-3:     #9A7C6B;
  --ink-4:     rgba(58,31,24,0.30);
  --ink-5:     rgba(58,31,24,0.10);

  --line:      rgba(58,31,24,0.10);
  --line-2:    rgba(58,31,24,0.20);

  --accent:        #9B6A1F;
  --accent-2:      #7E5519;
  --accent-ink:    #F6F0E0;
  --accent-soft:   rgba(155,106,31,0.08);
  --accent-line:   rgba(155,106,31,0.35);
  --accent-glow:   rgba(155,106,31,0.18);
}
body[data-palette="bronze"] .site-header {
  background: rgba(242,236,222,0.86);
}
body[data-palette="bronze"] .bg-grid {
  background-image: radial-gradient(rgba(58,31,24,0.14) 1px, transparent 1px);
}

/* ─── Espresso · contact.html ─────────────────────────────────
   Warm deep-roast dark mode: espresso-brown ground, cream ink,
   soft amber-rose accent. Hospitality register — approachable.
   ============================================================ */
body[data-palette="espresso"] {
  --bg:        #1A1310;
  --bg-2:      #221915;
  --bg-3:      #2C201B;
  --panel:     #241A16;
  --panel-2:   #2F231D;

  --ink:       #F4ECE0;
  --ink-2:     #C9BAA8;
  --ink-3:     #8A7B6C;
  --ink-4:     rgba(244,236,224,0.30);
  --ink-5:     rgba(244,236,224,0.10);

  --line:      rgba(244,236,224,0.08);
  --line-2:    rgba(244,236,224,0.18);

  --accent:        #E8A87C;
  --accent-2:      #CB8A60;
  --accent-ink:    #1A1310;
  --accent-soft:   rgba(232,168,124,0.10);
  --accent-line:   rgba(232,168,124,0.35);
  --accent-glow:   rgba(232,168,124,0.18);
}
body[data-palette="espresso"] .site-header {
  background: rgba(26,19,16,0.86);
}
body[data-palette="espresso"] .bg-grid {
  background-image: radial-gradient(rgba(244,236,224,0.10) 1px, transparent 1px);
}

/* ─── Atelier · how-it-works.html ─────────────────────────────
   Architect's drafting palette: cool off-white paper, graphite
   ink, single tuned cobalt accent. Precise, methodical.
   ============================================================ */
body[data-palette="atelier"] {
  --bg:        #F4F5F7;
  --bg-2:      #E8EAEE;
  --bg-3:      #D9DCE2;
  --panel:     #EEF0F3;
  --panel-2:   #E1E4E9;

  --ink:       #10131A;
  --ink-2:     #3A4150;
  --ink-3:     #6B7280;
  --ink-4:     rgba(16,19,26,0.30);
  --ink-5:     rgba(16,19,26,0.10);

  --line:      rgba(16,19,26,0.10);
  --line-2:    rgba(16,19,26,0.20);

  --accent:        #1F3FA8;
  --accent-2:      #172F82;
  --accent-ink:    #F4F5F7;
  --accent-soft:   rgba(31,63,168,0.07);
  --accent-line:   rgba(31,63,168,0.32);
  --accent-glow:   rgba(31,63,168,0.16);
}
body[data-palette="atelier"] .site-header {
  background: rgba(244,245,247,0.86);
}
body[data-palette="atelier"] .bg-grid {
  background-image: radial-gradient(rgba(16,19,26,0.13) 1px, transparent 1px);
}

/* ─── Gunmetal · projects.html ────────────────────────────────
   Dark cool-steel with vivid teal accent. The industrial register
   of Slate carried into a dark mode — built-work gallery.
   ============================================================ */
body[data-palette="gunmetal"] {
  --bg:        #16191D;
  --bg-2:      #1D2126;
  --bg-3:      #262B31;
  --panel:     #1A1E22;
  --panel-2:   #232830;

  --ink:       #ECEEF0;
  --ink-2:     #ABB2BA;
  --ink-3:     #707880;
  --ink-4:     rgba(236,238,240,0.30);
  --ink-5:     rgba(236,238,240,0.10);

  --line:      rgba(236,238,240,0.08);
  --line-2:    rgba(236,238,240,0.18);

  --accent:        #2BB4B0;
  --accent-2:      #239491;
  --accent-ink:    #0E1416;
  --accent-soft:   rgba(43,180,176,0.10);
  --accent-line:   rgba(43,180,176,0.35);
  --accent-glow:   rgba(43,180,176,0.18);
}
body[data-palette="gunmetal"] .site-header {
  background: rgba(22,25,29,0.86);
}
body[data-palette="gunmetal"] .bg-grid {
  background-image: radial-gradient(rgba(236,238,240,0.10) 1px, transparent 1px);
}