// A szemantikus színek a src/styles/tokens.css változóira mutatnak, hogy a // témaváltás (világos / sötét) egyetlen attribútumon múljon, és az // alfa-variánsok (bg-accent/15) is működjenek. const token = (name) => `rgb(var(${name}) / )` module.exports = { content: [ "./src/**/*.{astro,html,js,ts,jsx,tsx,vue,svelte}" ], // A témát a választja, nem a prefers-color-scheme. darkMode: ['selector', '[data-theme="dark"]'], theme: { extend: { colors: { // Szerepek — ezeket használja a markup. page: token('--c-page'), surface: token('--c-surface'), raised: token('--c-raised'), line: token('--c-line'), 'line-strong': token('--c-line-strong'), fg: token('--c-fg'), 'fg-muted': token('--c-fg-muted'), 'fg-subtle': token('--c-fg-subtle'), accent: token('--c-accent'), 'accent-hover': token('--c-accent-hover'), 'accent-fg': token('--c-accent-fg'), 'accent-quiet': token('--c-accent-quiet'), warn: token('--c-warn'), danger: token('--c-danger'), primary: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', }, retro: { green: '#33ff33', dark: '#0a0a0a', amber: '#ffb000', }, }, // Egy sugárskála: kártya, vezérlő. A kör (rounded-full) marad a Tailwindé. borderRadius: { card: '8px', control: '6px', }, // Árnyék csak lebegő elemre; a kártyát keret határolja, nem árnyék. boxShadow: { pop: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)', float: '0 8px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08)', }, }, }, plugins: [], }