/* ========================================================================== GiziMeal API — Global Color Palette (CSS Custom Properties) ========================================================================== Usage: var(--color-name) Dark mode colors are applied when is present. ========================================================================== */ :root { /* ── Zinc Scale (Primary Neutral) ─────────────────────────────────────── */ --zinc-950: #09090b; --zinc-900: #18181b; --zinc-800: #27272a; --zinc-700: #3f3f46; --zinc-600: #52525b; --zinc-500: #71717a; --zinc-400: #a1a1aa; --zinc-300: #d4d4d8; --zinc-200: #e4e4e7; --zinc-100: #f4f4f5; --zinc-50: #fafafa; --white: #ffffff; --black: #09090b; /* ── Accent Colors ────────────────────────────────────────────────────── */ --blue-600: #2563eb; --blue-700: #1d4ed8; --green-600: #16a34a; --green-700: #15803d; --green-400: #4ade80; --red-600: #dc2626; --red-700: #b91c1c; --red-400: #f87171; --red-100: #fef2f2; --red-200: #fecaca; --red-950: #450a0a; --red-900: #7f1d1d; --orange-700: #c2410c; --orange-400: #fb923c; --amber-600: #d97706; --amber-700: #b45309; --violet-50: #f5f3ff; --violet-700: #6d28d9; --violet-200: #ddd6fe; --violet-950: #2e1065; --violet-300: #c4b5fd; --violet-800: #5b21b6; --emerald-50: #ecfdf5; --emerald-700: #047857; --emerald-200: #a7f3d0; --emerald-950: #022c22; --emerald-300: #6ee7b7; --emerald-800: #065f46; --emerald-500: #10b981; /* ── Code Syntax Highlighting ─────────────────────────────────────────── */ --syntax-key: #818cf8; --syntax-string: #a3e635; --syntax-number: #f87171; --syntax-boolean: #c084fc; /* ── Semantic Tokens (Light Mode) ─────────────────────────────────────── */ --bg-primary: var(--white); --bg-secondary: var(--zinc-50); --bg-tertiary: var(--zinc-100); --bg-inverse: var(--zinc-900); --bg-code: var(--zinc-950); --text-primary: var(--zinc-950); --text-secondary: var(--zinc-500); --text-muted: var(--zinc-400); --text-inverse: var(--zinc-50); --border-default: var(--zinc-200); --border-subtle: var(--zinc-100); --badge-get-bg: var(--blue-600); --badge-post-bg: var(--green-600); --status-ok: var(--green-600); --status-warn: var(--amber-600); --status-error: var(--red-600); } /* ── Dark Mode Overrides ──────────────────────────────────────────────────── */ .dark { --bg-primary: #0f0f12; --bg-secondary: #1a1a1f; --bg-tertiary: #252529; --bg-inverse: var(--zinc-50); --bg-code: #0c0c0f; --text-primary: #f0f0f3; --text-secondary: #9d9da6; --text-muted: #6b6b76; --text-inverse: var(--zinc-900); --border-default: #2a2a30; --border-subtle: #1f1f25; --badge-get-bg: #3b82f6; --badge-post-bg: #22c55e; --status-ok: #22c55e; --status-warn: #f59e0b; --status-error: #ef4444; }