/*
 * shadcn-tokens.css
 * CSS variable bridge: maps existing BYCO variable names to shadcn/ui HSL values.
 * Load order: tailwind.css → shadcn-tokens.css → style.css → components.css
 * Zero template changes required — all 347 templates inherit the new look automatically.
 */

:root {
  /* ── shadcn/ui base tokens ───────────────────────────────── */
  --sh-background:       0 0% 100%;
  --sh-foreground:       240 10% 3.9%;
  --sh-card:             0 0% 100%;
  --sh-card-foreground:  240 10% 3.9%;
  --sh-popover:          0 0% 100%;
  --sh-popover-foreground: 240 10% 3.9%;
  --sh-primary:          240 10% 3.9%;
  --sh-primary-foreground: 0 0% 98%;
  --sh-secondary:        240 4.8% 95.9%;
  --sh-secondary-foreground: 240 5.9% 10%;
  --sh-muted:            240 4.8% 95.9%;
  --sh-muted-foreground: 240 3.8% 46.1%;
  --sh-accent:           240 4.8% 95.9%;
  --sh-accent-foreground: 240 5.9% 10%;
  --sh-destructive:      0 84.2% 60.2%;
  --sh-destructive-foreground: 0 0% 98%;
  --sh-border:           240 5.9% 90%;
  --sh-input:            240 5.9% 90%;
  --sh-ring:             240 5.9% 10%;

  /* ── semantic status tokens (HSL) ──────────────────────────── */
  --sh-success:          142 71% 45%;
  --sh-warning:          38 92% 50%;
  --sh-danger:           0 84% 60%;
  --sh-info:             217 91% 60%;

  /* ── sidebar tokens ──────────────────────────────────────── */
  --sh-sidebar:          240 10% 4.5%;
  --sh-sidebar-foreground: 0 0% 94%;
  --sh-sidebar-muted:    240 5% 45%;
  --sh-sidebar-accent:   240 10% 10%;

  /* ════════════════════════════════════════════════════════════
     RE-MAP OLD BYCO VARIABLE NAMES → shadcn HSL VALUES
     ════════════════════════════════════════════════════════════ */

  /* Backgrounds */
  --bg-primary:          hsl(var(--sh-background));
  --bg-secondary:        hsl(240 4.8% 97.5%);
  --bg-tertiary:         hsl(240 4.8% 95.9%);

  /* Text */
  --text-primary:        hsl(var(--sh-foreground));
  --text-secondary:      hsl(240 5.9% 26%);
  --text-muted:          hsl(var(--sh-muted-foreground));

  /* Borders */
  --border-color:        hsl(var(--sh-border));
  --border-dark:         hsl(240 5.9% 83%);

  /* Accent / brand */
  --accent:              hsl(var(--sh-primary));
  --accent-yellow:       hsl(38 92% 50%);
  --accent-yellow-hover: hsl(38 92% 44%);

  /* Sidebar */
  --sidebar-bg:          hsl(var(--sh-sidebar));
  --sidebar-text:        hsl(var(--sh-sidebar-foreground));
  --sidebar-text-muted:  hsl(var(--sh-sidebar-muted));

  /* Semantic / Google-brand → neutral equivalents */
  --google-blue:         hsl(var(--sh-info));
  --google-red:          hsl(var(--sh-danger));
  --google-yellow:       hsl(var(--sh-warning));
  --google-green:        hsl(var(--sh-success));
  --orange:              hsl(24 95% 53%);
  --purple:              hsl(262 83% 58%);
  --pink:                hsl(330 81% 60%);
  --cyan:                hsl(189 94% 43%);
  --teal:                hsl(174 72% 40%);

  /* Status */
  --success:             hsl(var(--sh-success));
  --warning:             hsl(var(--sh-warning));
  --danger:              hsl(var(--sh-danger));
  --info:                hsl(var(--sh-info));

  /* Shadows — subtler than before */
  --shadow-sm:  0 1px 2px 0 hsl(0 0% 0% / 0.04);
  --shadow:     0 1px 3px 0 hsl(0 0% 0% / 0.07), 0 1px 2px -1px hsl(0 0% 0% / 0.06);
  --shadow-md:  0 4px 6px -1px hsl(0 0% 0% / 0.07), 0 2px 4px -2px hsl(0 0% 0% / 0.05);
  --shadow-lg:  0 10px 15px -3px hsl(0 0% 0% / 0.08), 0 4px 6px -4px hsl(0 0% 0% / 0.05);
  --shadow-xl:  0 20px 25px -5px hsl(0 0% 0% / 0.08), 0 8px 10px -6px hsl(0 0% 0% / 0.04);

  /* Border radius — shadcn style */
  --radius-sm:  0.375rem;
  --radius:     0.5rem;
  --radius-lg:  0.75rem;
  --radius-xl:  1rem;

  /* ── components.css token aliases ──────────────────────────── */
  --color-primary:       hsl(var(--sh-primary));
  --color-primary-dark:  hsl(240 10% 10%);
  --color-secondary:     hsl(var(--sh-muted-foreground));
  --color-success:       hsl(var(--sh-success));
  --color-warning:       hsl(var(--sh-warning));
  --color-danger:        hsl(var(--sh-danger));
  --color-info:          hsl(var(--sh-info));

  --color-gray-50:       hsl(240 4.8% 97.5%);
  --color-gray-100:      hsl(240 4.8% 95.9%);
  --color-gray-200:      hsl(240 5.9% 90%);
  --color-gray-300:      hsl(240 5.9% 83%);
  --color-gray-400:      hsl(240 5% 64%);
  --color-gray-500:      hsl(240 3.8% 46.1%);
  --color-gray-600:      hsl(240 5.9% 26%);
  --color-gray-700:      hsl(240 5.9% 20%);
  --color-gray-800:      hsl(240 7% 14%);
  --color-gray-900:      hsl(240 10% 3.9%);
}
