/* Connecting H2O — brand design tokens.
   Ported verbatim from the React app's src/styles.css (:root) so the WordPress
   rebuild matches the headless storefront 1:1. Loaded globally by the child
   theme AND relied on by the "Connecting H2O – Elements" widget pack. */

:root {
  --radius: 0.875rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Surfaces */
  --background: oklch(1 0 0);
  --foreground: oklch(0.22 0.03 200);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.03 200);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.03 200);

  /* Deep blue brand */
  --primary: oklch(0.50 0.15 248);
  --primary-foreground: oklch(0.99 0.005 240);
  --primary-light: oklch(0.66 0.14 232);

  --secondary: oklch(0.97 0.015 200);
  --secondary-foreground: oklch(0.30 0.05 195);

  --muted: oklch(0.97 0.012 210);
  --muted-foreground: oklch(0.50 0.025 210);

  /* Warm gold #EF9F27 */
  --accent: oklch(0.78 0.14 75);
  --accent-foreground: oklch(0.25 0.05 60);

  --destructive: oklch(0.60 0.22 25);
  --destructive-foreground: oklch(0.99 0 0);

  --success: oklch(0.64 0.13 228);

  --border: oklch(0.93 0.012 210);
  --input: oklch(0.93 0.012 210);
  --ring: oklch(0.66 0.14 232);

  /* subtle blue tint background */
  --tint: oklch(0.985 0.012 210);

  --shadow-soft: 0 4px 20px -4px color-mix(in oklab, var(--primary) 15%, transparent);
  --shadow-card: 0 2px 12px -2px color-mix(in oklab, var(--primary) 10%, transparent);
  --shadow-lift: 0 20px 40px -12px color-mix(in oklab, var(--primary) 25%, transparent);
}

/* ── Brand utility classes (ported from src/styles.css @layer utilities) ───── */
.ch2o-gradient-hero {
  background: radial-gradient(ellipse at top, color-mix(in oklab, var(--primary-light) 15%, transparent), transparent 60%),
              linear-gradient(180deg, var(--tint), var(--background));
}
.ch2o-gradient-teal {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}
.ch2o-gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ch2o-glass {
  background: color-mix(in oklab, var(--background) 70%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}