/* Sapien — Color tokens
   Pulled from the Sapien 2.0 Figma file + the live site CSS.
   Backbone: ink-on-paper neutral system with one electric blue accent
   and a hard red used only for emphasis/error. */

:root {
  /* ---- Base palette ---------------------------------------------- */
  --sp-blue: #0000FF;          /* electric brand blue (accent)        */
  --sp-blue-ink: #0000CC;      /* pressed/darker blue                 */
  --sp-ink: #111111;           /* near-black, primary text + marks    */
  --sp-black: #000000;
  --sp-white: #FFFFFF;
  --sp-offwhite: #FAFAFA;      /* default page background             */
  --sp-paper: #F6F6F6;         /* lightgrey gradient base             */

  --sp-grey-50:  #F3F4F6;      /* light surface / card fill           */
  --sp-grey-100: #E5E9ED;      /* heading-ghost grey                  */
  --sp-grey-150: #D9DDE1;      /* subheading grey                     */
  --sp-grey-200: #D9D9D9;      /* hairline / disabled fill            */
  --sp-slate: #606E7B;         /* body grey (the workhorse muted ink) */
  --sp-chrome: #8E9BA1;        /* chrome gradient mid                 */
  --sp-water: #465967;         /* deep slate gradient                 */
  --sp-night: #18232C;         /* near-black slate gradient           */
  --sp-surface-dark: #202121;  /* dark card surface                   */
  --sp-red: #FF0000;           /* emphasis / error only               */

  /* ---- Derived (opacity) ----------------------------------------- */
  --sp-line: rgba(17,17,17,0.06);        /* grid lines, card hairline */
  --sp-line-strong: rgba(0,0,0,0.14);    /* stat-block border         */
  --sp-line-white: rgba(255,255,255,0.12);/* grid lines on blue/dark  */

  --sp-body: rgba(96,110,123,0.80);      /* default muted body text   */
  --sp-body-muted: rgba(96,110,123,0.50);/* grey50 secondary text     */
  --sp-body-faint: rgba(96,110,123,0.40);/* faint labels              */
  --sp-ghost: rgba(96,110,123,0.32);     /* ghosted display headings  */

  /* ---- Semantic (light, default) --------------------------------- */
  --sp-bg: var(--sp-offwhite);
  --sp-bg-alt: var(--sp-grey-50);
  --sp-surface: var(--sp-grey-50);
  --sp-surface-raised: var(--sp-white);

  --sp-text: var(--sp-ink);
  --sp-text-muted: var(--sp-body);
  --sp-text-subtle: var(--sp-body-muted);
  --sp-text-ghost: var(--sp-ghost);
  --sp-text-on-accent: var(--sp-grey-50);

  --sp-accent: var(--sp-blue);
  --sp-accent-hover: var(--sp-blue-ink);
  --sp-border: var(--sp-line);
  --sp-border-strong: var(--sp-line-strong);
  --sp-focus: var(--sp-blue);
}

/* ---- Blue section theme (full-bleed #0000FF panels) -------------- */
[data-theme="blue"] {
  --sp-bg: var(--sp-blue);
  --sp-bg-alt: var(--sp-blue);
  --sp-surface: var(--sp-blue);
  --sp-text: var(--sp-grey-50);
  --sp-text-muted: rgba(243,244,246,0.72);
  --sp-text-subtle: rgba(243,244,246,0.50);
  --sp-text-ghost: rgba(243,244,246,0.32);
  --sp-border: var(--sp-line-white);
  --sp-border-strong: var(--sp-line-white);
}

/* ---- Dark theme (night gradient / dark cards) ------------------- */
[data-theme="dark"] {
  --sp-bg: var(--sp-ink);
  --sp-bg-alt: var(--sp-surface-dark);
  --sp-surface: var(--sp-surface-dark);
  --sp-surface-raised: var(--sp-surface-dark);
  --sp-text: var(--sp-offwhite);
  --sp-text-muted: rgba(250,250,250,0.80);
  --sp-text-subtle: rgba(250,250,250,0.56);
  --sp-text-ghost: rgba(243,244,246,0.16);
  --sp-text-on-accent: var(--sp-grey-50);
  --sp-border: var(--sp-line-white);
  --sp-border-strong: var(--sp-line-white);
}