/** * themes.css — Multi-theme Color System * GitHub/shadcn style — zinc-neutral surfaces, clean primary colors * * 6 themes × 2 modes (light/dark) = 12 color configurations * Applied via [data-theme="name"] on + .dark class for dark mode * * All themes share the same zinc-neutral surface palette. * Only primary (and tertiary/error) colors differ per theme. */ /* ═══════════════════════════════════════════════════════════════════════════ THEME 1: Panda Red (Original brand) Primary: #c62828 ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="panda-red"], :root { /* ── Primary ──────────────────────────────────────────────────────────── */ --md-sys-color-primary: #c62828; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(198,40,40,0.1); --md-sys-color-on-primary-container: #7f1d1d; --md-sys-color-primary-hover: #b71c1c; --md-sys-color-inverse-primary: #ef4444; /* ── Secondary (zinc-neutral) ─────────────────────────────────────────── */ --md-sys-color-secondary: #71717a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f4f4f5; --md-sys-color-on-secondary-container:#09090b; /* ── Tertiary (warm neutral) ──────────────────────────────────────────── */ --md-sys-color-tertiary: #57534e; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f5f5f4; --md-sys-color-on-tertiary-container: #1c1917; /* ── Error ────────────────────────────────────────────────────────────── */ --md-sys-color-error: #dc2626; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #fee2e2; --md-sys-color-on-error-container: #7f1d1d; /* ── Surface (zinc-neutral light) ────────────────────────────────────── */ --md-sys-color-surface: #f4f5f7; --md-sys-color-surface-dim: #eaecef; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f5f7; --md-sys-color-surface-container: #eaecef; --md-sys-color-surface-container-high: #dde1e5; --md-sys-color-surface-container-highest:#d0d5da; --md-sys-color-on-surface: #09090b; --md-sys-color-on-surface-variant: #6e6e77; /* ── Outline (zinc) ──────────────────────────────────────────────────── */ --md-sys-color-outline: #8b929a; --md-sys-color-outline-variant: #d0d7de; /* ── Inverse ─────────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #18181b; --md-sys-color-inverse-on-surface: #fafafa; /* ── Semantic colors ─────────────────────────────────────────────────── */ --md-sys-color-success: #16a34a; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #dcfce7; --md-sys-color-warning: #d97706; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #fef3c7; --md-sys-color-info: #2563eb; --md-sys-color-on-info: #ffffff; --md-sys-color-info-container: #dbeafe; } [data-theme="panda-red"].dark, .dark:not([data-theme]) { /* ── Primary dark ─────────────────────────────────────────────────────── */ --md-sys-color-primary: #ef4444; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(239,68,68,0.15); --md-sys-color-on-primary-container: #fca5a5; --md-sys-color-primary-hover: #f87171; --md-sys-color-inverse-primary: #c62828; /* ── Secondary dark (zinc) ────────────────────────────────────────────── */ --md-sys-color-secondary: #a1a1aa; --md-sys-color-on-secondary: #09090b; --md-sys-color-secondary-container: #27272a; --md-sys-color-on-secondary-container:#fafafa; /* ── Tertiary dark ────────────────────────────────────────────────────── */ --md-sys-color-tertiary: #a8a29e; --md-sys-color-on-tertiary: #1c1917; --md-sys-color-tertiary-container: #292524; --md-sys-color-on-tertiary-container: #e7e5e4; /* ── Error dark ───────────────────────────────────────────────────────── */ --md-sys-color-error: #f87171; --md-sys-color-on-error: #7f1d1d; --md-sys-color-error-container: #991b1b; --md-sys-color-on-error-container: #fee2e2; /* ── Surface dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-surface: #09090b; --md-sys-color-surface-dim: #09090b; --md-sys-color-surface-bright: #27272a; --md-sys-color-surface-container-lowest: #09090b; --md-sys-color-surface-container-low: #111113; --md-sys-color-surface-container: #18181b; --md-sys-color-surface-container-high: #27272a; --md-sys-color-surface-container-highest:#3f3f46; --md-sys-color-on-surface: #fafafa; --md-sys-color-on-surface-variant: #a1a1aa; /* ── Outline dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-outline: #52525b; --md-sys-color-outline-variant: #3a3a40; /* ── Inverse dark ────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #fafafa; --md-sys-color-inverse-on-surface: #09090b; /* ── Semantic dark ───────────────────────────────────────────────────── */ --md-sys-color-success: #4ade80; --md-sys-color-on-success: #052e16; --md-sys-color-success-container: #14532d; --md-sys-color-warning: #fbbf24; --md-sys-color-on-warning: #451a03; --md-sys-color-warning-container: #78350f; --md-sys-color-info: #60a5fa; --md-sys-color-on-info: #1e3a8a; --md-sys-color-info-container: #1e3a8a; } /* ═══════════════════════════════════════════════════════════════════════════ THEME 2: Arctic Indigo Primary: #4355B9 ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="arctic-indigo"] { /* ── Primary ──────────────────────────────────────────────────────────── */ --md-sys-color-primary: #4355B9; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(67,85,185,0.1); --md-sys-color-on-primary-container: #1e1b4b; --md-sys-color-primary-hover: #3730a3; --md-sys-color-inverse-primary: #818cf8; /* ── Secondary (zinc-neutral) ─────────────────────────────────────────── */ --md-sys-color-secondary: #71717a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f4f4f5; --md-sys-color-on-secondary-container:#09090b; /* ── Tertiary (neutral) ───────────────────────────────────────────────── */ --md-sys-color-tertiary: #6b7280; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f9fafb; --md-sys-color-on-tertiary-container: #111827; /* ── Error ────────────────────────────────────────────────────────────── */ --md-sys-color-error: #dc2626; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #fee2e2; --md-sys-color-on-error-container: #7f1d1d; /* ── Surface (zinc-neutral light) ────────────────────────────────────── */ --md-sys-color-surface: #f4f5f7; --md-sys-color-surface-dim: #eaecef; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f5f7; --md-sys-color-surface-container: #eaecef; --md-sys-color-surface-container-high: #dde1e5; --md-sys-color-surface-container-highest:#d0d5da; --md-sys-color-on-surface: #09090b; --md-sys-color-on-surface-variant: #6e6e77; /* ── Outline (zinc) ──────────────────────────────────────────────────── */ --md-sys-color-outline: #8b929a; --md-sys-color-outline-variant: #d0d7de; /* ── Inverse ─────────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #18181b; --md-sys-color-inverse-on-surface: #fafafa; /* ── Semantic colors ─────────────────────────────────────────────────── */ --md-sys-color-success: #16a34a; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #dcfce7; --md-sys-color-warning: #d97706; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #fef3c7; --md-sys-color-info: #2563eb; --md-sys-color-on-info: #ffffff; --md-sys-color-info-container: #dbeafe; } [data-theme="arctic-indigo"].dark { /* ── Primary dark ─────────────────────────────────────────────────────── */ --md-sys-color-primary: #818cf8; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(129,140,248,0.15); --md-sys-color-on-primary-container: #c7d2fe; --md-sys-color-primary-hover: #a5b4fc; --md-sys-color-inverse-primary: #4355B9; /* ── Secondary dark (zinc) ────────────────────────────────────────────── */ --md-sys-color-secondary: #a1a1aa; --md-sys-color-on-secondary: #09090b; --md-sys-color-secondary-container: #27272a; --md-sys-color-on-secondary-container:#fafafa; /* ── Tertiary dark ────────────────────────────────────────────────────── */ --md-sys-color-tertiary: #9ca3af; --md-sys-color-on-tertiary: #111827; --md-sys-color-tertiary-container: #1f2937; --md-sys-color-on-tertiary-container: #f3f4f6; /* ── Error dark ───────────────────────────────────────────────────────── */ --md-sys-color-error: #f87171; --md-sys-color-on-error: #7f1d1d; --md-sys-color-error-container: #991b1b; --md-sys-color-on-error-container: #fee2e2; /* ── Surface dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-surface: #09090b; --md-sys-color-surface-dim: #09090b; --md-sys-color-surface-bright: #27272a; --md-sys-color-surface-container-lowest: #09090b; --md-sys-color-surface-container-low: #111113; --md-sys-color-surface-container: #18181b; --md-sys-color-surface-container-high: #27272a; --md-sys-color-surface-container-highest:#3f3f46; --md-sys-color-on-surface: #fafafa; --md-sys-color-on-surface-variant: #a1a1aa; /* ── Outline dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-outline: #52525b; --md-sys-color-outline-variant: #3a3a40; /* ── Inverse dark ────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #fafafa; --md-sys-color-inverse-on-surface: #09090b; /* ── Semantic dark ───────────────────────────────────────────────────── */ --md-sys-color-success: #4ade80; --md-sys-color-on-success: #052e16; --md-sys-color-success-container: #14532d; --md-sys-color-warning: #fbbf24; --md-sys-color-on-warning: #451a03; --md-sys-color-warning-container: #78350f; --md-sys-color-info: #60a5fa; --md-sys-color-on-info: #1e3a8a; --md-sys-color-info-container: #1e3a8a; } /* ═══════════════════════════════════════════════════════════════════════════ THEME 3: Fresh Teal Primary: #0d9488 ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="fresh-teal"] { /* ── Primary ──────────────────────────────────────────────────────────── */ --md-sys-color-primary: #0d9488; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(13,148,136,0.1); --md-sys-color-on-primary-container: #134e4a; --md-sys-color-primary-hover: #0f766e; --md-sys-color-inverse-primary: #2dd4bf; /* ── Secondary (zinc-neutral) ─────────────────────────────────────────── */ --md-sys-color-secondary: #71717a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f4f4f5; --md-sys-color-on-secondary-container:#09090b; /* ── Tertiary (zinc-neutral) ──────────────────────────────────────────── */ --md-sys-color-tertiary: #71717a; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f4f4f5; --md-sys-color-on-tertiary-container: #09090b; /* ── Error ────────────────────────────────────────────────────────────── */ --md-sys-color-error: #dc2626; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #fee2e2; --md-sys-color-on-error-container: #7f1d1d; /* ── Surface (zinc-neutral light) ────────────────────────────────────── */ --md-sys-color-surface: #f4f5f7; --md-sys-color-surface-dim: #eaecef; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f5f7; --md-sys-color-surface-container: #eaecef; --md-sys-color-surface-container-high: #dde1e5; --md-sys-color-surface-container-highest:#d0d5da; --md-sys-color-on-surface: #09090b; --md-sys-color-on-surface-variant: #6e6e77; /* ── Outline (zinc) ──────────────────────────────────────────────────── */ --md-sys-color-outline: #8b929a; --md-sys-color-outline-variant: #d0d7de; /* ── Inverse ─────────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #18181b; --md-sys-color-inverse-on-surface: #fafafa; /* ── Semantic colors ─────────────────────────────────────────────────── */ --md-sys-color-success: #16a34a; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #dcfce7; --md-sys-color-warning: #d97706; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #fef3c7; --md-sys-color-info: #2563eb; --md-sys-color-on-info: #ffffff; --md-sys-color-info-container: #dbeafe; } [data-theme="fresh-teal"].dark { /* ── Primary dark ─────────────────────────────────────────────────────── */ --md-sys-color-primary: #2dd4bf; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(45,212,191,0.15); --md-sys-color-on-primary-container: #99f6e4; --md-sys-color-primary-hover: #5eead4; --md-sys-color-inverse-primary: #0d9488; /* ── Secondary dark (zinc) ────────────────────────────────────────────── */ --md-sys-color-secondary: #a1a1aa; --md-sys-color-on-secondary: #09090b; --md-sys-color-secondary-container: #27272a; --md-sys-color-on-secondary-container:#fafafa; /* ── Tertiary dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-tertiary: #a1a1aa; --md-sys-color-on-tertiary: #09090b; --md-sys-color-tertiary-container: #27272a; --md-sys-color-on-tertiary-container: #fafafa; /* ── Error dark ───────────────────────────────────────────────────────── */ --md-sys-color-error: #f87171; --md-sys-color-on-error: #7f1d1d; --md-sys-color-error-container: #991b1b; --md-sys-color-on-error-container: #fee2e2; /* ── Surface dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-surface: #09090b; --md-sys-color-surface-dim: #09090b; --md-sys-color-surface-bright: #27272a; --md-sys-color-surface-container-lowest: #09090b; --md-sys-color-surface-container-low: #111113; --md-sys-color-surface-container: #18181b; --md-sys-color-surface-container-high: #27272a; --md-sys-color-surface-container-highest:#3f3f46; --md-sys-color-on-surface: #fafafa; --md-sys-color-on-surface-variant: #a1a1aa; /* ── Outline dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-outline: #52525b; --md-sys-color-outline-variant: #3a3a40; /* ── Inverse dark ────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #fafafa; --md-sys-color-inverse-on-surface: #09090b; /* ── Semantic dark ───────────────────────────────────────────────────── */ --md-sys-color-success: #4ade80; --md-sys-color-on-success: #052e16; --md-sys-color-success-container: #14532d; --md-sys-color-warning: #fbbf24; --md-sys-color-on-warning: #451a03; --md-sys-color-warning-container: #78350f; --md-sys-color-info: #60a5fa; --md-sys-color-on-info: #1e3a8a; --md-sys-color-info-container: #1e3a8a; } /* ═══════════════════════════════════════════════════════════════════════════ THEME 4: Deep Violet Primary: #7c3aed ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="deep-violet"] { /* ── Primary ──────────────────────────────────────────────────────────── */ --md-sys-color-primary: #7c3aed; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(124,58,237,0.1); --md-sys-color-on-primary-container: #2e1065; --md-sys-color-primary-hover: #6d28d9; --md-sys-color-inverse-primary: #a78bfa; /* ── Secondary (zinc-neutral) ─────────────────────────────────────────── */ --md-sys-color-secondary: #71717a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f4f4f5; --md-sys-color-on-secondary-container:#09090b; /* ── Tertiary (zinc-neutral) ──────────────────────────────────────────── */ --md-sys-color-tertiary: #71717a; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f4f4f5; --md-sys-color-on-tertiary-container: #09090b; /* ── Error ────────────────────────────────────────────────────────────── */ --md-sys-color-error: #dc2626; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #fee2e2; --md-sys-color-on-error-container: #7f1d1d; /* ── Surface (zinc-neutral light) ────────────────────────────────────── */ --md-sys-color-surface: #f4f5f7; --md-sys-color-surface-dim: #eaecef; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f5f7; --md-sys-color-surface-container: #eaecef; --md-sys-color-surface-container-high: #dde1e5; --md-sys-color-surface-container-highest:#d0d5da; --md-sys-color-on-surface: #09090b; --md-sys-color-on-surface-variant: #6e6e77; /* ── Outline (zinc) ──────────────────────────────────────────────────── */ --md-sys-color-outline: #8b929a; --md-sys-color-outline-variant: #d0d7de; /* ── Inverse ─────────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #18181b; --md-sys-color-inverse-on-surface: #fafafa; /* ── Semantic colors ─────────────────────────────────────────────────── */ --md-sys-color-success: #16a34a; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #dcfce7; --md-sys-color-warning: #d97706; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #fef3c7; --md-sys-color-info: #2563eb; --md-sys-color-on-info: #ffffff; --md-sys-color-info-container: #dbeafe; } [data-theme="deep-violet"].dark { /* ── Primary dark ─────────────────────────────────────────────────────── */ --md-sys-color-primary: #a78bfa; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(167,139,250,0.15); --md-sys-color-on-primary-container: #ddd6fe; --md-sys-color-primary-hover: #c4b5fd; --md-sys-color-inverse-primary: #7c3aed; /* ── Secondary dark (zinc) ────────────────────────────────────────────── */ --md-sys-color-secondary: #a1a1aa; --md-sys-color-on-secondary: #09090b; --md-sys-color-secondary-container: #27272a; --md-sys-color-on-secondary-container:#fafafa; /* ── Tertiary dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-tertiary: #a1a1aa; --md-sys-color-on-tertiary: #09090b; --md-sys-color-tertiary-container: #27272a; --md-sys-color-on-tertiary-container: #fafafa; /* ── Error dark ───────────────────────────────────────────────────────── */ --md-sys-color-error: #f87171; --md-sys-color-on-error: #7f1d1d; --md-sys-color-error-container: #991b1b; --md-sys-color-on-error-container: #fee2e2; /* ── Surface dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-surface: #09090b; --md-sys-color-surface-dim: #09090b; --md-sys-color-surface-bright: #27272a; --md-sys-color-surface-container-lowest: #09090b; --md-sys-color-surface-container-low: #111113; --md-sys-color-surface-container: #18181b; --md-sys-color-surface-container-high: #27272a; --md-sys-color-surface-container-highest:#3f3f46; --md-sys-color-on-surface: #fafafa; --md-sys-color-on-surface-variant: #a1a1aa; /* ── Outline dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-outline: #52525b; --md-sys-color-outline-variant: #3a3a40; /* ── Inverse dark ────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #fafafa; --md-sys-color-inverse-on-surface: #09090b; /* ── Semantic dark ───────────────────────────────────────────────────── */ --md-sys-color-success: #4ade80; --md-sys-color-on-success: #052e16; --md-sys-color-success-container: #14532d; --md-sys-color-warning: #fbbf24; --md-sys-color-on-warning: #451a03; --md-sys-color-warning-container: #78350f; --md-sys-color-info: #60a5fa; --md-sys-color-on-info: #1e3a8a; --md-sys-color-info-container: #1e3a8a; } /* ═══════════════════════════════════════════════════════════════════════════ THEME 5: Ocean Blue Primary: #2563eb ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="ocean-blue"] { /* ── Primary ──────────────────────────────────────────────────────────── */ --md-sys-color-primary: #2563eb; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(37,99,235,0.1); --md-sys-color-on-primary-container: #1e3a8a; --md-sys-color-primary-hover: #1d4ed8; --md-sys-color-inverse-primary: #60a5fa; /* ── Secondary (zinc-neutral) ─────────────────────────────────────────── */ --md-sys-color-secondary: #71717a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f4f4f5; --md-sys-color-on-secondary-container:#09090b; /* ── Tertiary (zinc-neutral) ──────────────────────────────────────────── */ --md-sys-color-tertiary: #71717a; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f4f4f5; --md-sys-color-on-tertiary-container: #09090b; /* ── Error ────────────────────────────────────────────────────────────── */ --md-sys-color-error: #dc2626; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #fee2e2; --md-sys-color-on-error-container: #7f1d1d; /* ── Surface (zinc-neutral light) ────────────────────────────────────── */ --md-sys-color-surface: #f4f5f7; --md-sys-color-surface-dim: #eaecef; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f5f7; --md-sys-color-surface-container: #eaecef; --md-sys-color-surface-container-high: #dde1e5; --md-sys-color-surface-container-highest:#d0d5da; --md-sys-color-on-surface: #09090b; --md-sys-color-on-surface-variant: #6e6e77; /* ── Outline (zinc) ──────────────────────────────────────────────────── */ --md-sys-color-outline: #8b929a; --md-sys-color-outline-variant: #d0d7de; /* ── Inverse ─────────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #18181b; --md-sys-color-inverse-on-surface: #fafafa; /* ── Semantic colors ─────────────────────────────────────────────────── */ --md-sys-color-success: #16a34a; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #dcfce7; --md-sys-color-warning: #d97706; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #fef3c7; --md-sys-color-info: #2563eb; --md-sys-color-on-info: #ffffff; --md-sys-color-info-container: #dbeafe; } [data-theme="ocean-blue"].dark { /* ── Primary dark ─────────────────────────────────────────────────────── */ --md-sys-color-primary: #60a5fa; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(96,165,250,0.15); --md-sys-color-on-primary-container: #bfdbfe; --md-sys-color-primary-hover: #93c5fd; --md-sys-color-inverse-primary: #2563eb; /* ── Secondary dark (zinc) ────────────────────────────────────────────── */ --md-sys-color-secondary: #a1a1aa; --md-sys-color-on-secondary: #09090b; --md-sys-color-secondary-container: #27272a; --md-sys-color-on-secondary-container:#fafafa; /* ── Tertiary dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-tertiary: #a1a1aa; --md-sys-color-on-tertiary: #09090b; --md-sys-color-tertiary-container: #27272a; --md-sys-color-on-tertiary-container: #fafafa; /* ── Error dark ───────────────────────────────────────────────────────── */ --md-sys-color-error: #f87171; --md-sys-color-on-error: #7f1d1d; --md-sys-color-error-container: #991b1b; --md-sys-color-on-error-container: #fee2e2; /* ── Surface dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-surface: #09090b; --md-sys-color-surface-dim: #09090b; --md-sys-color-surface-bright: #27272a; --md-sys-color-surface-container-lowest: #09090b; --md-sys-color-surface-container-low: #111113; --md-sys-color-surface-container: #18181b; --md-sys-color-surface-container-high: #27272a; --md-sys-color-surface-container-highest:#3f3f46; --md-sys-color-on-surface: #fafafa; --md-sys-color-on-surface-variant: #a1a1aa; /* ── Outline dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-outline: #52525b; --md-sys-color-outline-variant: #3a3a40; /* ── Inverse dark ────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #fafafa; --md-sys-color-inverse-on-surface: #09090b; /* ── Semantic dark ───────────────────────────────────────────────────── */ --md-sys-color-success: #4ade80; --md-sys-color-on-success: #052e16; --md-sys-color-success-container: #14532d; --md-sys-color-warning: #fbbf24; --md-sys-color-on-warning: #451a03; --md-sys-color-warning-container: #78350f; --md-sys-color-info: #60a5fa; --md-sys-color-on-info: #1e3a8a; --md-sys-color-info-container: #1e3a8a; } /* ═══════════════════════════════════════════════════════════════════════════ THEME 6: Warm Amber Primary: #d97706 ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="warm-amber"] { /* ── Primary ──────────────────────────────────────────────────────────── */ --md-sys-color-primary: #d97706; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: rgba(217,119,6,0.1); --md-sys-color-on-primary-container: #78350f; --md-sys-color-primary-hover: #b45309; --md-sys-color-inverse-primary: #fbbf24; /* ── Secondary (zinc-neutral) ─────────────────────────────────────────── */ --md-sys-color-secondary: #71717a; --md-sys-color-on-secondary: #ffffff; --md-sys-color-secondary-container: #f4f4f5; --md-sys-color-on-secondary-container:#09090b; /* ── Tertiary (zinc-neutral) ──────────────────────────────────────────── */ --md-sys-color-tertiary: #71717a; --md-sys-color-on-tertiary: #ffffff; --md-sys-color-tertiary-container: #f4f4f5; --md-sys-color-on-tertiary-container: #09090b; /* ── Error ────────────────────────────────────────────────────────────── */ --md-sys-color-error: #dc2626; --md-sys-color-on-error: #ffffff; --md-sys-color-error-container: #fee2e2; --md-sys-color-on-error-container: #7f1d1d; /* ── Surface (zinc-neutral light) ────────────────────────────────────── */ --md-sys-color-surface: #f4f5f7; --md-sys-color-surface-dim: #eaecef; --md-sys-color-surface-bright: #ffffff; --md-sys-color-surface-container-lowest: #ffffff; --md-sys-color-surface-container-low: #f4f5f7; --md-sys-color-surface-container: #eaecef; --md-sys-color-surface-container-high: #dde1e5; --md-sys-color-surface-container-highest:#d0d5da; --md-sys-color-on-surface: #09090b; --md-sys-color-on-surface-variant: #6e6e77; /* ── Outline (zinc) ──────────────────────────────────────────────────── */ --md-sys-color-outline: #8b929a; --md-sys-color-outline-variant: #d0d7de; /* ── Inverse ─────────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #18181b; --md-sys-color-inverse-on-surface: #fafafa; /* ── Semantic colors ─────────────────────────────────────────────────── */ --md-sys-color-success: #16a34a; --md-sys-color-on-success: #ffffff; --md-sys-color-success-container: #dcfce7; --md-sys-color-warning: #d97706; --md-sys-color-on-warning: #ffffff; --md-sys-color-warning-container: #fef3c7; --md-sys-color-info: #2563eb; --md-sys-color-on-info: #ffffff; --md-sys-color-info-container: #dbeafe; } [data-theme="warm-amber"].dark { /* ── Primary dark ─────────────────────────────────────────────────────── */ --md-sys-color-primary: #fbbf24; --md-sys-color-on-primary: #451a03; --md-sys-color-primary-container: rgba(251,191,36,0.15); --md-sys-color-on-primary-container: #fde68a; --md-sys-color-primary-hover: #fcd34d; --md-sys-color-inverse-primary: #d97706; /* ── Secondary dark (zinc) ────────────────────────────────────────────── */ --md-sys-color-secondary: #a1a1aa; --md-sys-color-on-secondary: #09090b; --md-sys-color-secondary-container: #27272a; --md-sys-color-on-secondary-container:#fafafa; /* ── Tertiary dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-tertiary: #a1a1aa; --md-sys-color-on-tertiary: #09090b; --md-sys-color-tertiary-container: #27272a; --md-sys-color-on-tertiary-container: #fafafa; /* ── Error dark ───────────────────────────────────────────────────────── */ --md-sys-color-error: #f87171; --md-sys-color-on-error: #7f1d1d; --md-sys-color-error-container: #991b1b; --md-sys-color-on-error-container: #fee2e2; /* ── Surface dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-surface: #09090b; --md-sys-color-surface-dim: #09090b; --md-sys-color-surface-bright: #27272a; --md-sys-color-surface-container-lowest: #09090b; --md-sys-color-surface-container-low: #111113; --md-sys-color-surface-container: #18181b; --md-sys-color-surface-container-high: #27272a; --md-sys-color-surface-container-highest:#3f3f46; --md-sys-color-on-surface: #fafafa; --md-sys-color-on-surface-variant: #a1a1aa; /* ── Outline dark (zinc) ─────────────────────────────────────────────── */ --md-sys-color-outline: #52525b; --md-sys-color-outline-variant: #3a3a40; /* ── Inverse dark ────────────────────────────────────────────────────── */ --md-sys-color-inverse-surface: #fafafa; --md-sys-color-inverse-on-surface: #09090b; /* ── Semantic dark ───────────────────────────────────────────────────── */ --md-sys-color-success: #4ade80; --md-sys-color-on-success: #052e16; --md-sys-color-success-container: #14532d; --md-sys-color-warning: #fbbf24; --md-sys-color-on-warning: #451a03; --md-sys-color-warning-container: #78350f; --md-sys-color-info: #60a5fa; --md-sys-color-on-info: #1e3a8a; --md-sys-color-info-container: #1e3a8a; }