/* =============================================================================
 * custom-theme.css — YOUR custom color theme (optional escape hatch)
 * =============================================================================
 *
 * Tinbox ships a few built-in color themes you can pick in
 *   Settings → Appearance.
 * This file is for when you want FULL manual control of the palette — a bespoke
 * brand color scheme that isn't one of the presets.
 *
 * HOW IT WORKS
 *   This stylesheet is loaded LAST, so anything you uncomment here OVERRIDES the
 *   built-in theme for EVERYONE on this deployment (it is a platform-wide
 *   override, not per-user). By default everything below is commented out, so
 *   this file does nothing and the chosen built-in theme is used.
 *
 * THE TOKENS
 *   Colors are shadcn design tokens written as COMPLETE CSS color values:
 *     - hsl(H S% L%)     — classic HSL
 *     - oklch(L% C H)    — perceptually uniform (better for hue shifts)
 *     - #rrggbb          — hex colors
 *
 *   Examples:
 *       --primary: hsl(30 79% 48%);       ✅ (HSL)
 *       --primary: oklch(68% 0.16 55);    ✅ (OKLCH)
 *       --primary: #d97b1a;               ✅ (hex)
 *
 *   `:root { … }`  = LIGHT mode tokens.
 *   `.dark { … }`  = DARK mode tokens (used when the user picks Dark, or System
 *                    resolves to dark).
 *
 *   You only need to override the tokens you want to change — any token you omit
 *   keeps its built-in value. The brand color is `--primary` (+ `--ring`,
 *   `--chart-1`, `--sidebar-primary` for full consistency).
 *
 * QUICK START
 *   1. Uncomment the block below.
 *   2. Change the values (a hue picker or oklch.com is handy).
 *   3. Redeploy (or hard-refresh in local dev).
 *
 * -----------------------------------------------------------------------------
 * WORKED EXAMPLE — a teal brand with teal-tinted surfaces (using OKLCH):
 * -----------------------------------------------------------------------------
 *
 * :root {
 *   --background: oklch(97.5% 0.006 180);
 *   --secondary: oklch(96% 0.008 180);
 *   --muted: oklch(96% 0.008 180);
 *   --accent: oklch(96% 0.008 180);
 *   --border: oklch(91% 0.01 180);
 *   --input: oklch(91% 0.01 180);
 *   --primary: hsl(178 60% 38%);
 *   --primary-foreground: hsl(0 0% 100%);
 *   --ring: hsl(178 60% 38%);
 *   --accent-foreground: hsl(178 60% 38%);
 *   --chart-1: hsl(178 60% 38%);
 *   --sidebar-background: oklch(97% 0.007 180);
 *   --sidebar-primary: hsl(178 60% 38%);
 *   --sidebar-ring: hsl(178 60% 38%);
 *   --sidebar-accent-foreground: hsl(178 60% 38%);
 * }
 *
 * .dark {
 *   --background: oklch(13% 0.01 180);
 *   --card: oklch(16% 0.012 180);
 *   --popover: oklch(16% 0.012 180);
 *   --secondary: oklch(15% 0.01 180);
 *   --muted: oklch(15% 0.01 180);
 *   --accent: oklch(22% 0.015 180);
 *   --border: oklch(22% 0.015 180);
 *   --input: oklch(22% 0.015 180);
 *   --primary: hsl(176 70% 55%);
 *   --primary-foreground: hsl(210 23% 5%);
 *   --ring: hsl(176 70% 55%);
 *   --accent-foreground: hsl(176 70% 55%);
 *   --chart-1: hsl(176 70% 55%);
 *   --sidebar-background: oklch(16% 0.012 180);
 *   --sidebar-primary: hsl(176 70% 55%);
 *   --sidebar-ring: hsl(176 70% 55%);
 *   --sidebar-accent-foreground: hsl(176 70% 55%);
 * }
 *
 * -----------------------------------------------------------------------------
 * FULL TOKEN REFERENCE (every token you can override; values shown are the
 * built-in LIGHT defaults — uncomment and edit any you want to change):
 * -----------------------------------------------------------------------------
 *
 * :root {
 *   --background: hsl(40 23% 97%);
 *   --foreground: hsl(36 11% 9%);
 *   --card: hsl(0 0% 100%);
 *   --card-foreground: hsl(36 11% 9%);
 *   --popover: hsl(0 0% 100%);
 *   --popover-foreground: hsl(36 11% 9%);
 *   --primary: hsl(30 79% 48%);
 *   --primary-foreground: hsl(0 0% 100%);
 *   --secondary: hsl(40 13% 95%);
 *   --secondary-foreground: hsl(36 11% 9%);
 *   --muted: hsl(40 13% 95%);
 *   --muted-foreground: hsl(27 5% 40%);
 *   --accent: hsl(40 13% 95%);
 *   --accent-foreground: hsl(30 79% 48%);
 *   --destructive: hsl(0 84% 60%);
 *   --destructive-foreground: hsl(0 0% 100%);
 *   --border: hsl(40 14% 89%);
 *   --input: hsl(40 14% 89%);
 *   --ring: hsl(30 79% 48%);
 *   --chart-1: hsl(30 79% 48%);
 *   --chart-2: hsl(22 78% 52%);
 *   --chart-3: hsl(40 80% 55%);
 *   --chart-4: hsl(14 75% 50%);
 *   --chart-5: hsl(48 75% 58%);
 *   --sidebar-background: hsl(40 18% 96%);
 *   --sidebar-foreground: hsl(27 8% 26%);
 *   --sidebar-primary: hsl(30 79% 48%);
 *   --sidebar-primary-foreground: hsl(0 0% 100%);
 *   --sidebar-accent: hsl(40 13% 95%);
 *   --sidebar-accent-foreground: hsl(30 79% 48%);
 *   --sidebar-border: hsl(40 14% 89%);
 *   --sidebar-ring: hsl(30 79% 48%);
 * }
 *
 * (Mirror the same tokens inside `.dark { … }` for dark-mode values.)
 * ========================================================================== */