/* Tempelhof palette · dark + light modes · liquid-glass tokens.
   THEME is a live object. ToggleTheme(mode) rewrites its keys in place
   so all components reading THEME.X pick up new values on next render. */

const PALETTE = {
  periwinkle: '#6986BF',   // primary brand blue. Periwinkle
  periwinkleLight: '#8FA4D0',
  periwinkleDeep: '#4E6DA8',
  navy: '#2A3640',         // primary dark
  navyDeep: '#1A232C',
  navyDeeper: '#121921',
  yellow: '#F2E857',       // soft citrus highlight
  honey: '#F2C53D',        // warm accent / warn
  amber: '#D99036',        // deep warm / CTA accent
  white: '#FFFFFF',
  /* Light-mode paper tones. Pulled darker on 2026-05-02 ("not blinding mode either").
     paper is the page bg; paperElev is for raised surfaces; paperDeep is for
     recessed/secondary panels. Old values were #F6F4EE / #FBFAF5 / #EEEBE2. */
  paper: '#E8E2D2',        // warm light bg, slightly tanned
  paperElev: '#F0EBDC',
  paperDeep: '#DED7C4',
  ink: '#1A232C',          // near-black on light
  inkDim: '#3B4754',
};

/* Start in dark mode by default. Rewritten by setThemeMode(). */
const THEME = {
  mode: 'dark',
  // filled by setThemeMode. See below
};

function buildTokens(mode) {
  const dark = mode === 'dark';
  return {
    mode,

    // surfaces
    bg:        dark ? PALETTE.navyDeep    : PALETTE.paper,
    bgDeep:    dark ? PALETTE.navyDeeper  : PALETTE.paperDeep,
    bgElev:    dark ? '#23303D'           : PALETTE.paperElev,
    bgElev2:   dark ? '#2E3C4B'           : '#FFFFFF',
    panel:     dark ? 'rgba(30,42,56,0.72)' : 'rgba(255,255,255,0.72)',
    panelSolid:dark ? '#23303D'           : '#FFFFFF',

    // glass layers. For backdrop-filter surfaces
    glass:        dark ? 'rgba(42,54,64,0.55)'      : 'rgba(255,255,255,0.55)',
    glassElev:    dark ? 'rgba(58,72,86,0.65)'      : 'rgba(255,255,255,0.7)',
    glassSubtle:  dark ? 'rgba(42,54,64,0.35)'      : 'rgba(255,255,255,0.4)',
    glassBorder:  dark ? 'rgba(255,255,255,0.08)'   : 'rgba(42,54,64,0.08)',
    glassHi:      dark ? 'rgba(255,255,255,0.06)'   : 'rgba(255,255,255,0.7)',

    // lines
    line:       dark ? 'rgba(255,255,255,0.08)'  : 'rgba(42,54,64,0.10)',
    lineSoft:   dark ? 'rgba(255,255,255,0.05)'  : 'rgba(42,54,64,0.06)',
    lineStrong: dark ? 'rgba(255,255,255,0.14)'  : 'rgba(42,54,64,0.16)',

    // text
    text:     dark ? '#F2F4F8'                : PALETTE.ink,
    textDim:  dark ? 'rgba(242,244,248,0.70)' : 'rgba(26,35,44,0.72)',
    textMute: dark ? 'rgba(242,244,248,0.42)' : 'rgba(26,35,44,0.48)',
    textFaint:dark ? 'rgba(242,244,248,0.24)' : 'rgba(26,35,44,0.28)',

    // brand. Tempelhof blue
    blue:     PALETTE.periwinkle,
    blueDim:  PALETTE.periwinkleDeep,
    blueSoft: dark ? 'rgba(105,134,191,0.18)' : 'rgba(105,134,191,0.14)',
    accent:   dark ? PALETTE.periwinkleLight  : PALETTE.periwinkleDeep,

    // status. Mapped from palette
    success:  '#5BA773',                                  // green balanced against the warm palette
    successSoft: dark ? 'rgba(91,167,115,0.15)' : 'rgba(91,167,115,0.12)',
    warn:     PALETTE.honey,
    /* warnText: ADA-compliant text color for warning UI. The base warn (#F2C53D)
       fails 4.5:1 contrast against light backgrounds. warnText is darker in light
       mode (deep ochre, ~5.5:1 against white) and lighter in dark mode. */
    warnText: dark ? '#F2D560' : '#7A5208',
    warnSoft: dark ? 'rgba(242,197,61,0.16)' : 'rgba(242,197,61,0.14)',
    danger:   PALETTE.amber,
    dangerSoft: dark ? 'rgba(217,144,54,0.18)' : 'rgba(217,144,54,0.14)',
    highlight:PALETTE.yellow,

    // raw
    palette: PALETTE,
  };
}

function setThemeMode(mode) {
  const t = buildTokens(mode);
  // rewrite in place so all refs see new values
  Object.keys(THEME).forEach(k => { delete THEME[k]; });
  Object.assign(THEME, t);
  if (typeof document !== 'undefined') {
    document.documentElement.dataset.theme = mode;
    document.body.style.background = t.bg;
    document.body.style.color = t.text;
  }
}

// initialize
setThemeMode('dark');

window.THEME = THEME;
window.PALETTE = PALETTE;
window.setThemeMode = setThemeMode;