/* ============================================================
   COLORS — "Indigo Ink"
   Base palette + semantic aliases for light (default) and dark.
   Off-white is the default surface; deep indigo is for dark
   sections only (hero, title slides, footer). Electric indigo
   appears in small doses — buttons, links, the key number.
   ============================================================ */

:root {
  /* ---- Core palette (raw brand colors) ---- */
  --tt-deep-indigo: #1E1B3A;     /* headings, dark sections, hero */
  --tt-electric-indigo: #4F46E5; /* CTAs, links, key figures — sparingly */
  --tt-indigo-light: #8B83F0;    /* lighter indigo for contrast on dark */
  --tt-label-indigo: #B8B5D6;    /* small uppercase labels on dark */
  --tt-warm-gray: #57534E;       /* body & secondary text */
  --tt-pale-lilac: #ECEAF5;      /* tags, dividers, soft fills */
  --tt-off-white: #FBFBFD;       /* default page & slide background */

  /* ---- Accent states ---- */
  --tt-accent: #4F46E5;
  --tt-accent-hover: #6358EC;
  --tt-accent-active: #4038C9;
  --tt-accent-on-dark: #8B83F0;  /* electric indigo is too dark on indigo */

  /* ---- Dark-surface tokens (deep-indigo sections) ---- */
  --tt-surface: #1E1B3A;
  --tt-surface-raised: #262248;
  --tt-surface-sunken: #151230;
  --tt-border: #322E5C;
  --tt-border-strong: #443F73;
  --tt-text: #FFFFFF;
  --tt-text-muted: #B8B5D6;
  --tt-text-subtle: #8C88B0;     /* AA: 4.9:1 on deep indigo */

  /* ---- Semantic light-surface tokens (the brand default) ---- */
  --tt-light-bg: #FBFBFD;        /* page / section background */
  --tt-light-surface: #FFFFFF;   /* raised cards / inputs */
  --tt-light-border: #E5E3EE;    /* hairline borders */
  --tt-light-heading: #1E1B3A;   /* headings & figures */
  --tt-light-body: #57534E;      /* body & secondary text */
  --tt-light-muted: #6F6B82;     /* muted labels — AA: 5:1 on off-white */

  /* ---- Focus ring ---- */
  --tt-focus-ring: rgba(79, 70, 229, 0.15);
}

/* ============================================================
   DARK THEME — remaps the semantic light tokens to dark values
   so any light section flips together by adding .tt-theme-dark.
   Deep indigo & electric indigo are dual-role and NOT remapped.
   ============================================================ */
.tt-theme-dark {
  --tt-light-bg: #1E1B3A;        /* default dark surface */
  --tt-light-surface: #262248;   /* raised cards / inputs */
  --tt-light-border: #322E5C;    /* borders */
  --tt-light-heading: #FFFFFF;   /* headings & figures */
  --tt-light-body: #B8B5D6;      /* body & secondary text */
  --tt-light-muted: #8C88B0;     /* muted labels — AA: 4.9:1 on dark */
  --tt-pale-lilac: #322E5C;      /* dividers / tag outlines on dark */
  --tt-warm-gray: #B8B5D6;       /* secondary text on dark */
}