/* ============================================================================
   machina-theme.css  —  The Machina family design tokens (SSOT).
   Owned by the parent (machina.nw). Substrates (music.nw, movies.nw, ...) load
   THIS first, then their own sheet on top. Nothing here is music-specific.

   Persistence note: palette / scale / theme are applied to <html> as data-*
   attributes. Within a session they are set by machina.js (no storage written
   to the visitor's machine). Cross-session memory is DEFERRED to the future
   consent front-door — by design, not omission. See machina.js.
   ============================================================================ */

/* ---- base surface (default = cool "azure" family paper, light) ------------ */
:root{
  /* neutral fallbacks; a palette block below always wins */
  --paper:#EEF1F4; --paper-2:#E3E8ED; --card:#FBFCFD;
  --ink:#161A1F;  --ink-2:#4C555E;  --ink-3:#7C8792;
  --line:#D5DEE6; --line-2:#E4EAEF;
  --accent:#2f74c0; --accent-2:#24588f;

  --gold:#C4A052; --gold-2:#A9863B;

  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 22px rgba(16,24,40,.06);
  --shadow-lg: 0 16px 48px rgba(16,24,40,.18);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* the splash is its own deep-midnight world, palette-independent */
  --void-a:#0B1730;   /* midnight blue, top */
  --void-b:#070E1D;   /* deeper, bottom */
  --void-ink:#93B7E3; /* soft luminous blue — the MACHINA wordmark */
  --void-ink-2:#6E88A8; /* muted blue-grey — tagline */
  --void-ink-3:#3F5674; /* faint — the coming names before they land */
  --void-name:#B9D0EC;  /* the substrate names as they cascade in */
}

/* ============================================================================
   FAMILY SURFACE RAMPS  —  the swatch dots re-theme the WHOLE surface,
   not just an accent. Each palette carries its own paper + ink + accent.
   Cascades site-wide off html[data-palette], exactly like light/dark.
   ============================================================================ */

/* --- AZURE : cool museum wall / aged blueprint (the flagship) --- */
html[data-palette="azure"]{
  --paper:#EEF1F4; --paper-2:#E3E8ED; --card:#FBFCFD;
  --ink:#161A1F; --ink-2:#4C555E; --ink-3:#7C8792;
  --line:#D5DEE6; --line-2:#E4EAEF;
  --accent:#2f74c0; --accent-2:#24588f;
}
/* --- CRIMSON : warm gallery, aged paper --- */
html[data-palette="crimson"]{
  --paper:#F5F0EE; --paper-2:#EDE4E2; --card:#FDFBFA;
  --ink:#1F1614; --ink-2:#5B4B47; --ink-3:#8C7A75;
  --line:#E4D3CF; --line-2:#EFE6E3;
  --accent:#b23443; --accent-2:#8a2530;
}
/* --- VERDANT : soft green-grey, botanical print --- */
html[data-palette="verdant"]{
  --paper:#EEF3EE; --paper-2:#E3EBE3; --card:#FBFDFB;
  --ink:#161C16; --ink-2:#495449; --ink-3:#7A857A;
  --line:#D5E1D5; --line-2:#E4EBE4;
  --accent:#3f8a54; --accent-2:#2f6b41;
}

/* ---- DARK MODE : cools + deepens every palette ---------------------------- */
html[data-theme="dark"]{
  --paper:#0F141B; --paper-2:#141A22; --card:#171E27;
  --ink:#E7ECF2; --ink-2:#AEB8C4; --ink-3:#7E8A98;
  --line:#232C37; --line-2:#1C242E;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55);
}
html[data-theme="dark"][data-palette="azure"]  { --accent:#5b9bd8; --accent-2:#3f7bbd; }
html[data-theme="dark"][data-palette="crimson"] { --accent:#d8697a; --accent-2:#bf4a5b; }
html[data-theme="dark"][data-palette="verdant"] { --accent:#6bbd7f; --accent-2:#4f9d63; }

/* ---- TEXT SCALE : sets the ROOT font-size; all rem content inherits ------- */
html[data-scale="1"]{ font-size:14px; }
html[data-scale="2"]{ font-size:15.5px; }
html[data-scale="3"]{ font-size:17px; }
html[data-scale="4"]{ font-size:18.5px; }