/* ============================================================ tailwind.css Toggle themes by setting data-theme on : ============================================================ */ /* Self-hosted fonts (not a Google Fonts CDN @import) so the library never depends on outbound network access to render its own type. */ @import "@fontsource/cinzel/400.css"; @import "@fontsource/cinzel/600.css"; @import "@fontsource/ibm-plex-sans/400.css"; @import "@fontsource/ibm-plex-sans/500.css"; @import "@fontsource/ibm-plex-mono/400.css"; @import "@fontsource/ibm-plex-mono/500.css"; @import "tailwindcss"; @import "tw-animate-css"; @import "shadcn-vue/tailwind.css"; /* Explicit source: this file is consumed by sibling workspace packages (e.g. packages/playground) whose own Vite root Tailwind's automatic content detection never walks into, so class usage in src/components/** would otherwise be invisible to the scanner. */ @source "../../"; @theme inline { --font-sans: var(--font-sans); --font-serif: var(--font-serif); --font-mono: var(--font-mono); --color-background: var(--surface-0); --color-foreground: var(--text-body); --color-card: var(--surface-1); --color-card-foreground: var(--text-body); --color-popover: var(--surface-2); --color-popover-foreground: var(--text-body); --color-primary: var(--primary); --color-primary-foreground: var(--primary-fg); --color-secondary: var(--neutral); --color-secondary-foreground: var(--neutral-fg); --color-muted: var(--surface-2); --color-muted-foreground: var(--text-muted); --color-accent: var(--surface-3); --color-accent-foreground: var(--text-high); --color-destructive: var(--danger); --color-destructive-foreground: var(--danger-fg); --color-info: var(--info); --color-info-foreground: var(--info-fg); --color-success: var(--success); --color-success-foreground: var(--success-fg); --color-warning: var(--warn); --color-warning-foreground: var(--warn-fg); --color-border: var(--border); --color-input: var(--border); --color-ring: var(--primary); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); } :root { --radius: 0.3125rem; } /* ── HADES ───────────────────────────────────────────────── */ [data-theme='hades'] { --surface-0: #18160f; --surface-1: #28241a; --surface-2: #2e2a1e; --surface-3: #322e22; --track: #32302a; --border: #4a4538; --border-hi: #5a5040; --border-lo: #38342a; --primary: #d4b278; --primary-fg: #0e0c08; --warn: #e08840; --warn-subtle: #281808; --warn-border: #4a2c10; --warn-fg: #fff8e8; --danger: #7a1a1a; --danger-subtle: #200808; --danger-border: #3a1010; --danger-fg: #fff8e8; --info: #88aec8; --info-subtle: #101e2c; --info-border: #1e3850; --info-fg: #0a1828; --neutral: #7a6e60; --neutral-fg: #fff8e8; --success: #6aaa7a; --success-subtle: #0e2214; --success-border: #1e4228; --success-fg: #fff8e8; --text-high: #f4f0e8; --text-body: #d0c8b8; --text-muted: #908878; --text-dim: #807868; --text-label: #c0b8a8; --focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.65); --font-serif: 'Cinzel', Georgia, serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; } /* ── APOLLO ──────────────────────────────────────────────── */ [data-theme='apollo'] { --surface-0: #faf7f2; --surface-1: #f4f0e8; --surface-2: #eee9df; --surface-3: #e4ddd0; --track: #e4ddd0; --border: #bab2a0; --border-hi: #c0b8a8; --border-lo: #ccc4b4; --primary: #b8860b; --primary-fg: #fff8e8; --warn: #9a6020; --warn-subtle: #fdf3e0; --warn-border: #e8d0a0; --warn-fg: #fff8e8; --danger: #7a1a1a; --danger-subtle: #faeaea; --danger-border: #c8a0a0; --danger-fg: #fff8e8; --info: #3a5a8a; --info-subtle: #e8eef8; --info-border: #b0c4e0; --info-fg: #fff8e8; --neutral: #8a8070; --neutral-fg: #fff8e8; --success: #5a7a40; --success-subtle: #eef4e8; --success-border: #c0d4a8; --success-fg: #fff8e8; --text-high: #1a1610; --text-body: #3a3020; --text-muted: #5a5040; --text-dim: #8a8070; --text-label: #5a5040; --focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.65); --font-serif: 'Cinzel', Georgia, serif; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', monospace; } @layer base { * { @apply border-border; box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { @apply bg-background text-foreground; min-height: 100vh; } :focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); } } @keyframes nych-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .nych-loading-icon .wreath { transform-origin: 340px 180px; animation: nych-spin 2s linear infinite; } .nych-loading-icon .wreath path { fill: var(--primary-fg); } .nych-loading-icon .wreath line { stroke: var(--text-high); }