/* ZincArt — Palette override for shadcnblocks
 * Maps shadcn semantic tokens to a desaturated zinc/copper identity
 * appropriate for a metal cladding / roofing services brand.
 */

:root {
  /* Base radius (shadcn uses --radius and derives the scale) */
  --radius: 0.5rem;

  /* Background / Foreground — light, neutral, paper-like */
  --background: oklch(98% 0.003 286);          /* near-white with cold zinc tint */
  --foreground: oklch(20% 0.008 286);          /* deep zinc-slate */

  /* Card / Popover */
  --card: oklch(100% 0 0);
  --card-foreground: oklch(20% 0.008 286);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(20% 0.008 286);

  /* Primary — Brand blue */
  --primary: #0D99FF;                          /* default */
  --primary-dark: #0A7ACC;                     /* for hover / pressed / depth */
  --primary-light: #E7F5FF;                    /* for subtle tints / backgrounds */
  --primary-foreground: oklch(98% 0.003 286);

  /* Secondary — Brushed zinc */
  --secondary: oklch(92% 0.005 286);           /* light zinc */
  --secondary-foreground: oklch(25% 0.008 286);

  /* Muted — Workshop neutral */
  --muted: oklch(95% 0.004 286);
  --muted-foreground: oklch(48% 0.012 286);

  /* Accent — Warm copper highlight */
  --accent: oklch(70% 0.13 50);                /* polished copper */
  --accent-foreground: oklch(15% 0.008 286);

  /* Destructive */
  --destructive: oklch(60% 0.22 25);
  --destructive-foreground: oklch(98% 0.003 286);

  /* Borders / Inputs / Ring */
  --border: oklch(90% 0.005 286);
  --input: oklch(90% 0.005 286);
  --ring: #0D99FF;                             /* matches primary */

  /* Chart palette (for any data viz blocks) */
  --chart-1: #0D99FF;                          /* primary brand blue */
  --chart-2: oklch(70% 0.13 50);               /* accent copper */
  --chart-3: oklch(40% 0.05 250);              /* dark slate */
  --chart-4: oklch(75% 0.06 80);               /* warm tan */
  --chart-5: oklch(50% 0.04 220);              /* steel blue */

  /* Sidebar (for blocks that have a sidebar variant) */
  --sidebar: oklch(98% 0.003 286);
  --sidebar-foreground: oklch(20% 0.008 286);
  --sidebar-primary: #0D99FF;
  --sidebar-primary-foreground: oklch(98% 0.003 286);
  --sidebar-accent: oklch(95% 0.004 286);
  --sidebar-accent-foreground: oklch(20% 0.008 286);
  --sidebar-border: oklch(90% 0.005 286);
  --sidebar-ring: #0D99FF;

  /* Shadows (kept generic) */
  --shadow-2xs: 0 1px 2px 0 oklch(0% 0 0 / 0.04);
  --shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.08);
  --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.08), 0 2px 4px -2px oklch(0% 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.08), 0 4px 6px -4px oklch(0% 0 0 / 0.06);
  --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.08), 0 8px 10px -6px oklch(0% 0 0 / 0.06);
  --shadow-2xl: 0 25px 50px -12px oklch(0% 0 0 / 0.18);
  --shadow: var(--shadow-sm);

  /* Font families (also expose --font-text used by some blocks) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: var(--font-sans);
  --font-text: var(--font-sans);
  --font-handwriting: 'Caveat', cursive;
  --font-dm_sans: 'Inter', sans-serif;        /* alias used by some blocks */
}

.dark {
  --background: oklch(15% 0.005 286);
  --foreground: oklch(98% 0.003 286);
  --card: oklch(20% 0.008 286);
  --card-foreground: oklch(98% 0.003 286);
  --popover: oklch(20% 0.008 286);
  --popover-foreground: oklch(98% 0.003 286);
  --primary: #0D99FF;
  --primary-dark: #0A7ACC;
  --primary-light: #E7F5FF;
  --primary-foreground: oklch(98% 0.003 286);
  --secondary: oklch(25% 0.008 286);
  --secondary-foreground: oklch(98% 0.003 286);
  --muted: oklch(25% 0.008 286);
  --muted-foreground: oklch(70% 0.012 286);
  --accent: oklch(75% 0.14 50);
  --accent-foreground: oklch(15% 0.005 286);
  --destructive: oklch(65% 0.22 25);
  --destructive-foreground: oklch(98% 0.003 286);
  --border: oklch(25% 0.008 286);
  --input: oklch(25% 0.008 286);
  --ring: #0D99FF;
}

/* Body baseline (matches what shadcn blocks expect) */
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

/* WhatsApp brand color helper (used by WhatsApp buttons across blocks) */
.bg-whatsapp { background-color: #25D366; }
.bg-whatsapp:hover { background-color: #1ebe57; }
.text-whatsapp { color: #25D366; }