/* Keystone Residential — static design tokens (light theme) */
:root {
  --radius: 0.625rem;
  --background: oklch(0.99 0.005 90);
  --foreground: oklch(0.20 0.03 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.20 0.03 250);
  --primary: oklch(0.28 0.06 255);
  --primary-foreground: oklch(0.98 0.01 90);
  --secondary: oklch(0.96 0.015 85);
  --secondary-foreground: oklch(0.28 0.06 255);
  --muted: oklch(0.96 0.012 250);
  --muted-foreground: oklch(0.50 0.03 255);
  --accent: oklch(0.74 0.13 75);
  --accent-foreground: oklch(0.20 0.03 250);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.90 0.015 250);
  --input: oklch(0.92 0.012 250);
  --ring: oklch(0.74 0.13 75);
  --gradient-hero: linear-gradient(135deg, oklch(0.20 0.04 255 / 0.85), oklch(0.28 0.06 255 / 0.55));
  --shadow-elegant: 0 20px 60px -20px oklch(0.20 0.04 255 / 0.25);
  --shadow-card: 0 8px 30px -12px oklch(0.20 0.04 255 / 0.18);
}

/*
 * Color utilities — defined explicitly because Tailwind Play CDN's
 * opacity modifiers (/90, /85, /30, etc.) don't work reliably when
 * colors are sourced from CSS variables holding oklch() values.
 * `color-mix(in oklch, X N%, transparent)` gives us proper alpha.
 */

/* Base surfaces */
.bg-background       { background-color: var(--background); }
.bg-card             { background-color: var(--card); }
.bg-primary          { background-color: var(--primary); }
.bg-secondary        { background-color: var(--secondary); }
.bg-accent           { background-color: var(--accent); }
.bg-muted            { background-color: var(--muted); }
.bg-input            { background-color: var(--input); }

/* Text colors */
.text-foreground            { color: var(--foreground); }
.text-card-foreground       { color: var(--card-foreground); }
.text-primary               { color: var(--primary); }
.text-primary-foreground    { color: var(--primary-foreground); }
.text-secondary-foreground  { color: var(--secondary-foreground); }
.text-accent                { color: var(--accent); }
.text-accent-foreground     { color: var(--accent-foreground); }
.text-muted-foreground      { color: var(--muted-foreground); }
.text-destructive           { color: var(--destructive); }

/* Borders */
.border-border            { border-color: var(--border); }
.border-input             { border-color: var(--input); }

/* Translucent surfaces (background) */
.bg-background\/80        { background-color: color-mix(in oklch, var(--background) 80%, transparent); }
.bg-background\/60        { background-color: color-mix(in oklch, var(--background) 60%, transparent); }
.bg-secondary\/40         { background-color: color-mix(in oklch, var(--secondary) 40%, transparent); }
.bg-primary-foreground\/10 { background-color: color-mix(in oklch, var(--primary-foreground) 10%, transparent); }

.hover\:bg-primary\/90:hover           { background-color: color-mix(in oklch, var(--primary) 90%, transparent); }
.hover\:bg-primary-foreground\/20:hover { background-color: color-mix(in oklch, var(--primary-foreground) 20%, transparent); }

/* Translucent text */
.text-primary-foreground\/85          { color: color-mix(in oklch, var(--primary-foreground) 85%, transparent); }
.text-primary-foreground\/80          { color: color-mix(in oklch, var(--primary-foreground) 80%, transparent); }
.text-primary-foreground\/70          { color: color-mix(in oklch, var(--primary-foreground) 70%, transparent); }
.text-accent-foreground\/80           { color: color-mix(in oklch, var(--accent-foreground) 80%, transparent); }

/* Translucent borders */
.border-primary-foreground\/30        { border-color: color-mix(in oklch, var(--primary-foreground) 30%, transparent); }

/* Hover text */
.hover\:text-foreground:hover         { color: var(--foreground); }

/* Focus ring */
.focus\:border-ring:focus             { border-color: var(--ring); }
.focus\:ring-ring\/30:focus           { --tw-ring-color: color-mix(in oklch, var(--ring) 30%, transparent); }

body {
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}