// MilestonesSlide themes — extracted from MilestonesSlide.tsx
// Contains: THEMES, Theme type, useIsLight hook, MONO style, CSS_KF keyframes

import { useState, useEffect } from 'react'

export const MONO: React.CSSProperties = {
  fontFamily: '"JetBrains Mono","SF Mono",ui-monospace,monospace',
  fontVariantNumeric: 'tabular-nums',
}

export const CSS_KF = `
  @keyframes msFlow { 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-18} }
  @keyframes msFadeIn { from{opacity:0} to{opacity:1} }
  @keyframes msScaleIn { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
  @keyframes msHeadingDark {
    0%,100%{text-shadow:0 0 22px rgba(167,139,250,.3)}
    50%    {text-shadow:0 0 40px rgba(167,139,250,.6)}
  }
  @keyframes msHeadingLight {
    0%,100%{text-shadow:0 0 22px rgba(124,58,237,.15)}
    50%    {text-shadow:0 0 36px rgba(124,58,237,.30)}
  }
  @keyframes msPulse {
    0%,100%{r:9;opacity:.4}
    50%    {r:14;opacity:.05}
  }
`

export function useIsLight() {
  const [isLight, setIsLight] = useState(false)
  useEffect(() => {
    const check = () => setIsLight(document.documentElement.classList.contains('theme-light'))
    check()
    const obs = new MutationObserver(check)
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
    return () => obs.disconnect()
  }, [])
  return isLight
}

export const THEMES = {
  dark: {
    key: 'dark' as const,
    bg: 'radial-gradient(ellipse at 50% 25%, #1a0f34 0%, #0e0720 55%, #050210 100%)',
    ambient: 'radial-gradient(ellipse, rgba(167,139,250,.18), transparent 65%)',
    stars: true,
    fg: '#f7f5fc',
    fgSoft: 'rgba(236,233,247,.82)',
    fgMid: 'rgba(236,233,247,.72)',
    fgMuted: 'rgba(236,233,247,.62)',
    fgFaint: 'rgba(236,233,247,.55)',
    fgGhost: 'rgba(236,233,247,.45)',
    fgWhisper: 'rgba(236,233,247,.4)',
    accent: '#a78bfa',
    accent80: 'rgba(167,139,250,.8)',
    accent70: 'rgba(167,139,250,.7)',
    accent50: 'rgba(167,139,250,.5)',
    accent40: 'rgba(167,139,250,.4)',
    accent20: 'rgba(167,139,250,.2)',
    headingGrad: 'linear-gradient(90deg, #e9e2ff, #a78bfa 50%, #e9e2ff)',
    headingAnim: 'msHeadingDark 4s ease-in-out infinite',
    heuteText: '#e4d4ff',
    heutePillBg: 'rgba(14,8,28,.95)',
    heuteCore: '#f0e9ff',
    done: '#4ade80',
    doneBright: '#86efac',
    doneDeep: '#166534',
    doneSolid: '#22c55e',
    cardBase: 'rgba(14,8,28,',
    cardBaseA: '.9',
    cardBaseAH: '.95',
    cardTintTop: '18', cardTintTopH: '2e',
    cardTintMid: '08', cardTintMidH: '14',
    cardShadowSoft: '0 10px 24px rgba(0,0,0,.45)',
    cardShadowLift: (t: string) => `0 20px 44px ${t}33, 0 0 0 1px ${t}66, inset 0 1px 0 ${t}66`,
    statTintTop: '18', statTintTopH: '2a',
    statTintMid: '06',
    statShadowSoft: '0 10px 24px rgba(0,0,0,.45)',
    statShadowLift: (t: string) => `0 18px 40px ${t}33, 0 0 0 1px ${t}55, inset 0 1px 0 ${t}55`,
    modalScrim: 'rgba(5,2,16,.75)',
    modalBgMid: 'rgba(20,10,40,.97)',
    modalBgLow: 'rgba(14,8,28,.98)',
    modalShadow: (t: string) => `0 30px 80px rgba(0,0,0,.65), 0 0 60px ${t}33, inset 0 1px 0 ${t}55`,
    bulletBg: 'rgba(0,0,0,.3)',
    progressTrackBg: 'rgba(255,255,255,.08)',
    progressTrackBorder: 'rgba(167,139,250,.2)',
    dotTodoDeep: '#1a0f34',
    dotLitHi: 'rgba(255,255,255,.5)',
    dotSoftHi: 'rgba(255,255,255,.3)',
    sparkOp: 0.45,
  },
  light: {
    key: 'light' as const,
    bg: 'radial-gradient(ellipse at 50% 12%, #ffffff 0%, #f5efff 55%, #ebdfff 100%)',
    ambient: 'radial-gradient(ellipse, rgba(124,58,237,.14), transparent 65%)',
    stars: false,
    fg: '#1a0f34',
    fgSoft: 'rgba(26,15,52,.85)',
    fgMid: 'rgba(26,15,52,.72)',
    fgMuted: 'rgba(26,15,52,.62)',
    fgFaint: 'rgba(26,15,52,.50)',
    fgGhost: 'rgba(26,15,52,.40)',
    fgWhisper: 'rgba(26,15,52,.32)',
    accent: '#7c3aed',
    accent80: 'rgba(124,58,237,.8)',
    accent70: 'rgba(124,58,237,.75)',
    accent50: 'rgba(124,58,237,.55)',
    accent40: 'rgba(124,58,237,.4)',
    accent20: 'rgba(124,58,237,.18)',
    headingGrad: 'linear-gradient(90deg, #3b0e7a, #7c3aed 50%, #3b0e7a)',
    headingAnim: 'msHeadingLight 4s ease-in-out infinite',
    heuteText: '#4c1d95',
    heutePillBg: 'rgba(255,255,255,.98)',
    heuteCore: '#7c3aed',
    done: '#16a34a',
    doneBright: '#4ade80',
    doneDeep: '#14532d',
    doneSolid: '#22c55e',
    cardBase: 'rgba(255,255,255,',
    cardBaseA: '.92',
    cardBaseAH: '.98',
    cardTintTop: '22', cardTintTopH: '3a',
    cardTintMid: '10', cardTintMidH: '1c',
    cardShadowSoft: '0 10px 24px rgba(59,26,122,.10), 0 2px 6px rgba(59,26,122,.06)',
    cardShadowLift: (t: string) => `0 20px 44px ${t}38, 0 0 0 1px ${t}77, inset 0 1px 0 rgba(255,255,255,.9)`,
    statTintTop: '1e', statTintTopH: '34',
    statTintMid: '08',
    statShadowSoft: '0 10px 24px rgba(59,26,122,.10), 0 2px 6px rgba(59,26,122,.06)',
    statShadowLift: (t: string) => `0 18px 40px ${t}38, 0 0 0 1px ${t}77, inset 0 1px 0 rgba(255,255,255,.9)`,
    modalScrim: 'rgba(40,20,80,.28)',
    modalBgMid: 'rgba(255,255,255,.98)',
    modalBgLow: 'rgba(250,247,255,.98)',
    modalShadow: (t: string) => `0 30px 80px rgba(59,26,122,.25), 0 0 60px ${t}33, inset 0 1px 0 rgba(255,255,255,.9)`,
    bulletBg: 'rgba(124,58,237,.06)',
    progressTrackBg: 'rgba(124,58,237,.12)',
    progressTrackBorder: 'rgba(124,58,237,.25)',
    dotTodoDeep: '#faf5ff',
    dotLitHi: 'rgba(255,255,255,.85)',
    dotSoftHi: 'rgba(255,255,255,.55)',
    sparkOp: 0.55,
  },
}

export type Theme = typeof THEMES.dark | typeof THEMES.light
