/* YAZSAD — design tokens. 4 themes selectable via [data-theme] on . */ :root { /* density scales (shared across themes; overridden by data-density) */ --dens-1: 4px; --dens-2: 8px; --dens-3: 12px; --dens-4: 16px; --dens-5: 24px; --dens-6: 32px; --dens-7: 48px; --dens-8: 64px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; --font-display: "Fraunces", "Playfair Display", Georgia, serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* defaults, overwritten per theme */ --bg: #0b0b0d; --bg-elev: #131317; --bg-elev-2: #1c1c22; --bg-hover: #20202a; --fg: #f3f1ea; --fg-muted: #a5a3a0; --fg-dim: #6b6b72; --border: #2a2a33; --border-strong: #3a3a45; --accent: #e94e1b; --accent-fg: #0b0b0d; --accent-soft: rgba(233, 78, 27, 0.15); --success: #4ade80; --danger: #ef4444; --warning: #fbbf24; /* waveform + ai badge */ --wave: #ffd8a8; --ai-tag-bg: rgba(233, 78, 27, 0.12); --ai-tag-fg: #ffb08a; } /* === Theme 1: Sinematik Koyu === */ [data-theme="cinematic"] { --bg: #0a0a0c; --bg-elev: #121217; --bg-elev-2: #1a1a22; --bg-hover: #22222d; --fg: #f4f2ec; --fg-muted: #9a98a3; --fg-dim: #5e5d68; --border: #26262f; --border-strong: #3a3a46; --accent: #e94e1b; --accent-fg: #0a0a0c; --accent-soft: rgba(233, 78, 27, 0.14); --wave: #ffb68a; --ai-tag-bg: rgba(233, 78, 27, 0.14); --ai-tag-fg: #ffb08a; --font-display: "Fraunces", serif; --font-body: "Inter", system-ui, sans-serif; } /* === Theme 2: Anadolu Modern === */ [data-theme="anadolu"] { --bg: #1a1410; --bg-elev: #241c16; --bg-elev-2: #2e251e; --bg-hover: #362c24; --fg: #f5ead4; --fg-muted: #c0a880; --fg-dim: #8a7555; --border: #3a2e22; --border-strong: #52402e; --accent: #d4a574; --accent-fg: #1a1410; --accent-soft: rgba(212, 165, 116, 0.16); --wave: #d4a574; --ai-tag-bg: rgba(139, 38, 53, 0.3); --ai-tag-fg: #e89a9a; --danger: #c23b22; --success: #8aa96b; --font-display: "Cormorant Garamond", "Fraunces", serif; --font-body: "Be Vietnam Pro", "Inter", sans-serif; } /* === Theme 3: Editoryal Aydınlık === */ [data-theme="editorial"] { --bg: #faf7f0; --bg-elev: #ffffff; --bg-elev-2: #f2ede2; --bg-hover: #ece5d5; --fg: #1a1a1a; --fg-muted: #5c5a54; --fg-dim: #8f8b82; --border: #ddd6c7; --border-strong: #b8b0a0; --accent: #c23b22; --accent-fg: #ffffff; --accent-soft: rgba(194, 59, 34, 0.1); --wave: #1a1a1a; --ai-tag-bg: #1a1a1a; --ai-tag-fg: #faf7f0; --font-display: "Fraunces", "Playfair Display", serif; --font-body: "Instrument Sans", "Inter", sans-serif; } /* === Theme 4: Terminal / Brutalist === */ [data-theme="terminal"] { --bg: #000000; --bg-elev: #0a0a0a; --bg-elev-2: #111111; --bg-hover: #1a1a1a; --fg: #e8e8e8; --fg-muted: #888888; --fg-dim: #555555; --border: #222222; --border-strong: #444444; --accent: #00ff88; --accent-fg: #000000; --accent-soft: rgba(0, 255, 136, 0.12); --wave: #00ff88; --ai-tag-bg: rgba(0, 255, 136, 0.14); --ai-tag-fg: #00ff88; --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 0; --font-display: "JetBrains Mono", "IBM Plex Mono", monospace; --font-body: "JetBrains Mono", "IBM Plex Mono", monospace; } /* Density */ [data-density="tight"] { --dens-3: 8px; --dens-4: 12px; --dens-5: 18px; --dens-6: 24px; --dens-7: 36px; --dens-8: 48px; } [data-density="airy"] { --dens-3: 16px; --dens-4: 22px; --dens-5: 32px; --dens-6: 44px; --dens-7: 64px; --dens-8: 88px; } /* Base resets */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, textarea, select { font-family: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-fg); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* Utilities */ .mono { font-family: var(--font-mono); } .display { font-family: var(--font-display); } .ai-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; background: var(--ai-tag-bg); color: var(--ai-tag-fg); border-radius: var(--radius-xs); font-size: 10px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .ai-tag::before { content: ""; width: 4px; height: 4px; background: currentColor; border-radius: 50%; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--dens-2); padding: var(--dens-3) var(--dens-5); border-radius: var(--radius-full); font-weight: 600; font-size: 13px; transition: all 0.15s; white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--accent-fg); } .btn-primary:hover { filter: brightness(1.1); } .btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--bg-hover); border-color: var(--border-strong); } .btn-icon { padding: var(--dens-2); width: 36px; height: 36px; border-radius: var(--radius-full); background: transparent; color: var(--fg-muted); } .btn-icon:hover { background: var(--bg-hover); color: var(--fg); } [data-theme="terminal"] .btn { border-radius: 0; text-transform: uppercase; font-family: var(--font-mono); letter-spacing: 0.05em; font-size: 11px; } [data-theme="terminal"] .btn-icon { border-radius: 0; }