/* ============================================================================
   TONIC DESIGN TOKENS  (shared, single source of truth)
   ----------------------------------------------------------------------------
   The whole visual system is driven by CSS custom properties. To re-theme a
   page/section you change ONLY the six --m-* values (best via body[data-module]).
   Everything that references the aliases below follows automatically.

   This file declares VARIABLES ONLY — adding it to a page has no visual effect
   until something references the tokens, so it is safe to link app-wide.

   Direction: a near-neutral cool canvas with a curated, vibrant accent set
   (six jewel-tone hues, no rainbow). Green is no longer the brand; it is freed
   for one section accent. Red/green are still avoided as accents elsewhere so
   they never collide with success/error feedback.
   ========================================================================== */

:root {
  /* ---- App neutrals (constant across the whole app) — cool near-neutral ---- */
  --bg:        #F6F7FB;   /* page background — barely-cool off-white            */
  --panel:     #FFFFFF;   /* cards / sheets / bars                              */
  --line:      #E5E7F1;   /* hairline borders, dividers                         */
  --line-2:    #CDD2E4;   /* slightly stronger divider                          */
  --ink:       #14182B;   /* primary text — near-black, faint cool             */
  --ink-soft:  #353B57;   /* secondary text                                    */
  --ink-mute:  #6A7090;   /* muted text, captions, labels                      */

  /* ---- MODULE THEME — the only six values you change to re-theme ----------- */
  /* Default = indigo (the new Tonic brand accent).                             */
  --m-base: #5566F0;   /* light accent (gradient end, soft fills)              */
  --m-bold: #4350E6;   /* MAIN accent — buttons, active states, links          */
  --m-dark: #2E3AC0;   /* darker accent — accent text, hover                   */
  --m-deep: #20298C;   /* deepest — rare, strong emphasis                      */
  --m-tint: #ECEEFD;   /* very light wash — example-box / soft backgrounds     */
  --m-mark: #D6DAFB;   /* light highlight — <mark>, chips                      */

  /* ---- Semantic feedback (FIXED app-wide, never themed) -------------------- */
  --good-bg:#E7F7ED; --good-border:#C4EBD9; --good-ink:#1F7A48;   /* success   */
  --bad-bg:#FFE6E6;  --bad-border:#FFCACA;  --bad-ink:#C0392B;    /* error     */
  --tip-bg:#FFF8E6;  --tip-border:#FFE8A0;  --tip-ink:#7A5800;    /* hint      */
  --warn-bg:#FFF0E8; --warn-border:#FFD0B0; --warn-ink:#8A3E00;   /* warning   */

  /* ---- Type --------------------------------------------------------------- */
  --font-ui:      'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Lora', Georgia, serif;

  /* ---- Shape & depth ------------------------------------------------------ */
  --radius-card: 18px;
  --radius-pill: 999px;
  --radius-input: 10px;
  --shadow-card: 0 2px 10px rgba(20,24,43,0.05);
  --shadow-pop:  0 12px 40px rgba(20,24,43,0.22);
}


/* Functional aliases live on :root AND body. The body copy re-resolves --m-* after a
   body[data-module] override, so --primary etc. follow the active theme (not the default). */
:root, body {
  --primary:      var(--m-bold);
  --primary-dark: var(--m-dark);
  --primary-soft: var(--m-tint);
  --primary-text: var(--m-dark);
  --accent:       var(--m-dark);
  --accent-dark:  var(--m-deep);
  --mark:         var(--m-mark);
}

/* ============================================================================
   THE CURATED MODULE PALETTE  (6 vibrant hues — no rainbow, no red/green accent)
   ----------------------------------------------------------------------------
   Each row is a complete --m-* set + a --m-grad gradient end for tiles.
   Apply with body[data-module="x"], or copy the six values into a page :root.
   Derivation if you add one: --m-dark = darken ~22%, --m-deep = darken ~42%,
   --m-tint = ~90% toward white, --m-mark = ~78% toward white. Keep the accent's
   luminance under ~165 so white text on it stays legible.
   ========================================================================== */
body[data-module="indigo"]  { --m-base:#5566F0; --m-bold:#4350E6; --m-dark:#2E3AC0; --m-deep:#20298C; --m-tint:#ECEEFD; --m-mark:#D6DAFB; --m-grad:#5E72FF; }
body[data-module="teal"]    { --m-base:#12B0BE; --m-bold:#0E9AA8; --m-dark:#0A7280; --m-deep:#085961; --m-tint:#E6F4F6; --m-mark:#C9E8EB; --m-grad:#1FB6C4; }
body[data-module="violet"]  { --m-base:#9A57E2; --m-bold:#8B46D6; --m-dark:#6B2EAE; --m-deep:#50287C; --m-tint:#F3ECFA; --m-mark:#E5D6F5; --m-grad:#A567EE; }
body[data-module="sky"]     { --m-base:#2C9CDB; --m-bold:#1E8FD0; --m-dark:#15699C; --m-deep:#115278; --m-tint:#E8F3FA; --m-mark:#CDE6F4; --m-grad:#39ABE8; }
body[data-module="amber"]   { --m-base:#E0871C; --m-bold:#D07A12; --m-dark:#A35C08; --m-deep:#78460A; --m-tint:#FAF1E7; --m-mark:#F4E1CA; --m-grad:#EE9A2E; }
body[data-module="magenta"] { --m-base:#D04A9B; --m-bold:#C0398A; --m-dark:#982B6C; --m-deep:#6F2150; --m-tint:#F8EBF3; --m-mark:#F1D3E5; --m-grad:#DC58A4; }

/* Dark-mode note: palette is tuned for light backgrounds. For a dark theme,
   swap the neutrals and lift --m-tint/--m-mark toward translucent-white overlays;
   the accents themselves still read well. */