/**
 * Color Scopes — Flat Named Presets
 *
 * This file is loaded DIRECTLY by PHP (not through Tailwind/Vite).
 * It must remain unlayered so CSS custom properties cascade correctly
 * in both the frontend and the WordPress editor iframe.
 *
 * 8 flat, mutually exclusive presets registered as WordPress block styles.
 * Each preset defines THREE layers of custom properties:
 *   1. Semantic tokens (--foreground, --primary, etc.)
 *   2. Tailwind bridge (--color-foreground, --color-primary, etc.)
 *   3. WordPress bridge (--wp--preset--color--foreground, etc.)
 *
 * All three layers must be set per-scope because CSS custom properties
 * resolve var() references at computed-value time on the DEFINING element.
 * Properties set at :root are inherited as concrete values, NOT as
 * unresolved var() references. So a scope that only sets --primary
 * won't update the inherited --color-primary from :root.
 *
 * Palette vars come from assets/css/tokens.css (generated by
 * scripts/build-tokens.mjs), loaded unlayered before this file on both
 * the front end and the editor iframe.
 */

/* ==========================================================================
   PALETTE — provided by assets/css/tokens.css (generated, enqueued before
   this file on the front end and via add_editor_style for the editor
   iframe). The old duplicated :root block is gone; do not reintroduce it.
   ========================================================================== */

/* ==========================================================================
   1. Dark (default)
   ========================================================================== */

.is-style-dark {
  /* Semantic tokens */
  --background: var(--slate-950);
  --foreground: var(--slate-50);
  --card: var(--slate-950);
  --card-foreground: var(--slate-50);
  --primary: var(--slate-50);
  --primary-foreground: var(--slate-900);
  --secondary: var(--slate-900);
  --secondary-foreground: var(--slate-50);
  --muted: var(--slate-900);
  --muted-foreground: var(--slate-400);
  --accent: var(--slate-900);
  --accent-foreground: var(--slate-50);
  --destructive: var(--red-900);
  --destructive-foreground: var(--slate-50);
  --border: var(--slate-800);
  --ring: var(--slate-300);

  /* Tailwind bridge (--color-* tokens used by utilities + inline styles) */
  --color-background: var(--slate-950);
  --color-foreground: var(--slate-50);
  --color-card: var(--slate-950);
  --color-card-foreground: var(--slate-50);
  --color-primary: var(--slate-50);
  --color-primary-foreground: var(--slate-900);
  --color-secondary: var(--slate-900);
  --color-secondary-foreground: var(--slate-50);
  --color-muted: var(--slate-900);
  --color-muted-foreground: var(--slate-400);
  --color-accent: var(--slate-900);
  --color-accent-foreground: var(--slate-50);
  --color-destructive: var(--red-900);
  --color-destructive-foreground: var(--slate-50);
  --color-border: var(--slate-800);
  --color-ring: var(--slate-300);

  /* WordPress bridge (--wp--preset--color--* used by has-*-color classes) */
  --wp--preset--color--background: var(--slate-950);
  --wp--preset--color--foreground: var(--slate-50);
  --wp--preset--color--card: var(--slate-950);
  --wp--preset--color--card-foreground: var(--slate-50);
  --wp--preset--color--primary: var(--slate-50);
  --wp--preset--color--primary-foreground: var(--slate-900);
  --wp--preset--color--secondary: var(--slate-900);
  --wp--preset--color--secondary-foreground: var(--slate-50);
  --wp--preset--color--muted: var(--slate-900);
  --wp--preset--color--muted-foreground: var(--slate-400);
  --wp--preset--color--accent: var(--slate-900);
  --wp--preset--color--accent-foreground: var(--slate-50);
  --wp--preset--color--destructive: var(--red-900);
  --wp--preset--color--destructive-foreground: var(--slate-50);
  --wp--preset--color--border: var(--slate-800);
  --wp--preset--color--ring: var(--slate-300);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   2. Light
   ========================================================================== */

.is-style-light {
  --background: oklch(1 0 0);
  --foreground: var(--slate-900);
  --card: oklch(1 0 0);
  --card-foreground: var(--slate-900);
  --primary: var(--slate-800);
  --primary-foreground: var(--slate-50);
  --secondary: var(--slate-100);
  --secondary-foreground: var(--slate-900);
  --muted: var(--slate-100);
  --muted-foreground: var(--slate-500);
  --accent: var(--slate-100);
  --accent-foreground: var(--slate-900);
  --destructive: var(--red-500);
  --destructive-foreground: var(--slate-50);
  --border: var(--slate-300);
  --ring: var(--slate-800);

  --color-background: oklch(1 0 0);
  --color-foreground: var(--slate-900);
  --color-card: oklch(1 0 0);
  --color-card-foreground: var(--slate-900);
  --color-primary: var(--slate-800);
  --color-primary-foreground: var(--slate-50);
  --color-secondary: var(--slate-100);
  --color-secondary-foreground: var(--slate-900);
  --color-muted: var(--slate-100);
  --color-muted-foreground: var(--slate-500);
  --color-accent: var(--slate-100);
  --color-accent-foreground: var(--slate-900);
  --color-destructive: var(--red-500);
  --color-destructive-foreground: var(--slate-50);
  --color-border: var(--slate-300);
  --color-ring: var(--slate-800);

  --wp--preset--color--background: oklch(1 0 0);
  --wp--preset--color--foreground: var(--slate-900);
  --wp--preset--color--card: oklch(1 0 0);
  --wp--preset--color--card-foreground: var(--slate-900);
  --wp--preset--color--primary: var(--slate-800);
  --wp--preset--color--primary-foreground: var(--slate-50);
  --wp--preset--color--secondary: var(--slate-100);
  --wp--preset--color--secondary-foreground: var(--slate-900);
  --wp--preset--color--muted: var(--slate-100);
  --wp--preset--color--muted-foreground: var(--slate-500);
  --wp--preset--color--accent: var(--slate-100);
  --wp--preset--color--accent-foreground: var(--slate-900);
  --wp--preset--color--destructive: var(--red-500);
  --wp--preset--color--destructive-foreground: var(--slate-50);
  --wp--preset--color--border: var(--slate-300);
  --wp--preset--color--ring: var(--slate-800);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   3. Silver (medium silver bg, dark text)
   ========================================================================== */

.is-style-silver {
  --background: var(--vg-400);
  --foreground: var(--vg-950);
  --card: var(--vg-200);
  --card-foreground: var(--vg-950);
  --primary: var(--vg-950);
  --primary-foreground: var(--vg-50);
  --secondary: var(--vg-300);
  --secondary-foreground: var(--vg-950);
  --muted: var(--vg-300);
  --muted-foreground: var(--vg-700);
  --accent: var(--vg-300);
  --accent-foreground: var(--vg-950);
  --destructive: var(--red-500);
  --destructive-foreground: var(--vg-50);
  --border: var(--vg-500);
  --ring: var(--vg-950);

  --color-background: var(--vg-400);
  --color-foreground: var(--vg-950);
  --color-card: var(--vg-200);
  --color-card-foreground: var(--vg-950);
  --color-primary: var(--vg-950);
  --color-primary-foreground: var(--vg-50);
  --color-secondary: var(--vg-300);
  --color-secondary-foreground: var(--vg-950);
  --color-muted: var(--vg-300);
  --color-muted-foreground: var(--vg-700);
  --color-accent: var(--vg-300);
  --color-accent-foreground: var(--vg-950);
  --color-destructive: var(--red-500);
  --color-destructive-foreground: var(--vg-50);
  --color-border: var(--vg-500);
  --color-ring: var(--vg-950);

  --wp--preset--color--background: var(--vg-400);
  --wp--preset--color--foreground: var(--vg-950);
  --wp--preset--color--card: var(--vg-200);
  --wp--preset--color--card-foreground: var(--vg-950);
  --wp--preset--color--primary: var(--vg-950);
  --wp--preset--color--primary-foreground: var(--vg-50);
  --wp--preset--color--secondary: var(--vg-300);
  --wp--preset--color--secondary-foreground: var(--vg-950);
  --wp--preset--color--muted: var(--vg-300);
  --wp--preset--color--muted-foreground: var(--vg-700);
  --wp--preset--color--accent: var(--vg-300);
  --wp--preset--color--accent-foreground: var(--vg-950);
  --wp--preset--color--destructive: var(--red-500);
  --wp--preset--color--destructive-foreground: var(--vg-50);
  --wp--preset--color--border: var(--vg-500);
  --wp--preset--color--ring: var(--vg-950);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   4. Silver Dark (dark silver bg, light text)
   ========================================================================== */

.is-style-silver-dark {
  --background: var(--vg-800);
  --foreground: var(--vg-50);
  --card: var(--vg-900);
  --card-foreground: var(--vg-50);
  --primary: var(--vg-50);
  --primary-foreground: var(--vg-900);
  --secondary: var(--vg-700);
  --secondary-foreground: var(--vg-50);
  --muted: var(--vg-700);
  --muted-foreground: var(--vg-300);
  --accent: var(--vg-700);
  --accent-foreground: var(--vg-50);
  --destructive: var(--red-500);
  --destructive-foreground: var(--vg-50);
  --border: var(--vg-600);
  --ring: var(--vg-300);

  --color-background: var(--vg-800);
  --color-foreground: var(--vg-50);
  --color-card: var(--vg-900);
  --color-card-foreground: var(--vg-50);
  --color-primary: var(--vg-50);
  --color-primary-foreground: var(--vg-900);
  --color-secondary: var(--vg-700);
  --color-secondary-foreground: var(--vg-50);
  --color-muted: var(--vg-700);
  --color-muted-foreground: var(--vg-300);
  --color-accent: var(--vg-700);
  --color-accent-foreground: var(--vg-50);
  --color-destructive: var(--red-500);
  --color-destructive-foreground: var(--vg-50);
  --color-border: var(--vg-600);
  --color-ring: var(--vg-300);

  --wp--preset--color--background: var(--vg-800);
  --wp--preset--color--foreground: var(--vg-50);
  --wp--preset--color--card: var(--vg-900);
  --wp--preset--color--card-foreground: var(--vg-50);
  --wp--preset--color--primary: var(--vg-50);
  --wp--preset--color--primary-foreground: var(--vg-900);
  --wp--preset--color--secondary: var(--vg-700);
  --wp--preset--color--secondary-foreground: var(--vg-50);
  --wp--preset--color--muted: var(--vg-700);
  --wp--preset--color--muted-foreground: var(--vg-300);
  --wp--preset--color--accent: var(--vg-700);
  --wp--preset--color--accent-foreground: var(--vg-50);
  --wp--preset--color--destructive: var(--red-500);
  --wp--preset--color--destructive-foreground: var(--vg-50);
  --wp--preset--color--border: var(--vg-600);
  --wp--preset--color--ring: var(--vg-300);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   5. Silver Light (light silver bg, dark text)
   ========================================================================== */

.is-style-silver-light {
  --background: var(--vg-200);
  --foreground: var(--vg-950);
  --card: var(--vg-50);
  --card-foreground: var(--vg-950);
  --primary: var(--vg-950);
  --primary-foreground: var(--vg-50);
  --secondary: var(--vg-100);
  --secondary-foreground: var(--vg-950);
  --muted: var(--vg-100);
  --muted-foreground: var(--vg-600);
  --accent: var(--vg-100);
  --accent-foreground: var(--vg-950);
  --destructive: var(--red-500);
  --destructive-foreground: var(--vg-50);
  --border: var(--vg-300);
  --ring: var(--vg-950);

  --color-background: var(--vg-200);
  --color-foreground: var(--vg-950);
  --color-card: var(--vg-50);
  --color-card-foreground: var(--vg-950);
  --color-primary: var(--vg-950);
  --color-primary-foreground: var(--vg-50);
  --color-secondary: var(--vg-100);
  --color-secondary-foreground: var(--vg-950);
  --color-muted: var(--vg-100);
  --color-muted-foreground: var(--vg-600);
  --color-accent: var(--vg-100);
  --color-accent-foreground: var(--vg-950);
  --color-destructive: var(--red-500);
  --color-destructive-foreground: var(--vg-50);
  --color-border: var(--vg-300);
  --color-ring: var(--vg-950);

  --wp--preset--color--background: var(--vg-200);
  --wp--preset--color--foreground: var(--vg-950);
  --wp--preset--color--card: var(--vg-50);
  --wp--preset--color--card-foreground: var(--vg-950);
  --wp--preset--color--primary: var(--vg-950);
  --wp--preset--color--primary-foreground: var(--vg-50);
  --wp--preset--color--secondary: var(--vg-100);
  --wp--preset--color--secondary-foreground: var(--vg-950);
  --wp--preset--color--muted: var(--vg-100);
  --wp--preset--color--muted-foreground: var(--vg-600);
  --wp--preset--color--accent: var(--vg-100);
  --wp--preset--color--accent-foreground: var(--vg-950);
  --wp--preset--color--destructive: var(--red-500);
  --wp--preset--color--destructive-foreground: var(--vg-50);
  --wp--preset--color--border: var(--vg-300);
  --wp--preset--color--ring: var(--vg-950);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   6. Amber (medium amber bg, dark text)
   ========================================================================== */

.is-style-amber {
  --background: var(--amber-500);
  --foreground: var(--slate-950);
  --card: oklch(0.870 0.14 84);
  --card-foreground: var(--slate-950);
  --primary: var(--slate-950);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.840 0.13 84);
  --secondary-foreground: var(--slate-950);
  --muted: oklch(0.840 0.13 84);
  --muted-foreground: var(--slate-800);
  --accent: oklch(0.840 0.13 84);
  --accent-foreground: var(--slate-950);
  --destructive: var(--red-900);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.720 0.18 84);
  --ring: var(--slate-950);

  --color-background: var(--amber-500);
  --color-foreground: var(--slate-950);
  --color-card: oklch(0.870 0.14 84);
  --color-card-foreground: var(--slate-950);
  --color-primary: var(--slate-950);
  --color-primary-foreground: oklch(1 0 0);
  --color-secondary: oklch(0.840 0.13 84);
  --color-secondary-foreground: var(--slate-950);
  --color-muted: oklch(0.840 0.13 84);
  --color-muted-foreground: var(--slate-800);
  --color-accent: oklch(0.840 0.13 84);
  --color-accent-foreground: var(--slate-950);
  --color-destructive: var(--red-900);
  --color-destructive-foreground: oklch(1 0 0);
  --color-border: oklch(0.720 0.18 84);
  --color-ring: var(--slate-950);

  --wp--preset--color--background: var(--amber-500);
  --wp--preset--color--foreground: var(--slate-950);
  --wp--preset--color--card: oklch(0.870 0.14 84);
  --wp--preset--color--card-foreground: var(--slate-950);
  --wp--preset--color--primary: var(--slate-950);
  --wp--preset--color--primary-foreground: oklch(1 0 0);
  --wp--preset--color--secondary: oklch(0.840 0.13 84);
  --wp--preset--color--secondary-foreground: var(--slate-950);
  --wp--preset--color--muted: oklch(0.840 0.13 84);
  --wp--preset--color--muted-foreground: var(--slate-800);
  --wp--preset--color--accent: oklch(0.840 0.13 84);
  --wp--preset--color--accent-foreground: var(--slate-950);
  --wp--preset--color--destructive: var(--red-900);
  --wp--preset--color--destructive-foreground: oklch(1 0 0);
  --wp--preset--color--border: oklch(0.720 0.18 84);
  --wp--preset--color--ring: var(--slate-950);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   7. Amber Dark (dark amber bg, light text)
   ========================================================================== */

.is-style-amber-dark {
  --background: oklch(0.45 0.12 84);
  --foreground: oklch(1 0 0);
  --card: oklch(0.38 0.10 84);
  --card-foreground: oklch(1 0 0);
  --primary: oklch(1 0 0);
  --primary-foreground: oklch(0.38 0.10 84);
  --secondary: oklch(0.52 0.12 84);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.52 0.12 84);
  --muted-foreground: oklch(0.80 0.10 84);
  --accent: oklch(0.52 0.12 84);
  --accent-foreground: oklch(1 0 0);
  --destructive: var(--red-500);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.58 0.14 84);
  --ring: oklch(1 0 0);

  --color-background: oklch(0.45 0.12 84);
  --color-foreground: oklch(1 0 0);
  --color-card: oklch(0.38 0.10 84);
  --color-card-foreground: oklch(1 0 0);
  --color-primary: oklch(1 0 0);
  --color-primary-foreground: oklch(0.38 0.10 84);
  --color-secondary: oklch(0.52 0.12 84);
  --color-secondary-foreground: oklch(1 0 0);
  --color-muted: oklch(0.52 0.12 84);
  --color-muted-foreground: oklch(0.80 0.10 84);
  --color-accent: oklch(0.52 0.12 84);
  --color-accent-foreground: oklch(1 0 0);
  --color-destructive: var(--red-500);
  --color-destructive-foreground: oklch(1 0 0);
  --color-border: oklch(0.58 0.14 84);
  --color-ring: oklch(1 0 0);

  --wp--preset--color--background: oklch(0.45 0.12 84);
  --wp--preset--color--foreground: oklch(1 0 0);
  --wp--preset--color--card: oklch(0.38 0.10 84);
  --wp--preset--color--card-foreground: oklch(1 0 0);
  --wp--preset--color--primary: oklch(1 0 0);
  --wp--preset--color--primary-foreground: oklch(0.38 0.10 84);
  --wp--preset--color--secondary: oklch(0.52 0.12 84);
  --wp--preset--color--secondary-foreground: oklch(1 0 0);
  --wp--preset--color--muted: oklch(0.52 0.12 84);
  --wp--preset--color--muted-foreground: oklch(0.80 0.10 84);
  --wp--preset--color--accent: oklch(0.52 0.12 84);
  --wp--preset--color--accent-foreground: oklch(1 0 0);
  --wp--preset--color--destructive: var(--red-500);
  --wp--preset--color--destructive-foreground: oklch(1 0 0);
  --wp--preset--color--border: oklch(0.58 0.14 84);
  --wp--preset--color--ring: oklch(1 0 0);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   8. Amber Light (soft amber bg, dark text)
   ========================================================================== */

.is-style-amber-light {
  --background: oklch(0.92 0.08 84);
  --foreground: var(--slate-950);
  --card: oklch(0.96 0.04 84);
  --card-foreground: var(--slate-950);
  --primary: var(--slate-950);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.88 0.06 84);
  --secondary-foreground: var(--slate-950);
  --muted: oklch(0.88 0.06 84);
  --muted-foreground: var(--slate-700);
  --accent: oklch(0.88 0.06 84);
  --accent-foreground: var(--slate-950);
  --destructive: var(--red-500);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.82 0.10 84);
  --ring: var(--slate-950);

  --color-background: oklch(0.92 0.08 84);
  --color-foreground: var(--slate-950);
  --color-card: oklch(0.96 0.04 84);
  --color-card-foreground: var(--slate-950);
  --color-primary: var(--slate-950);
  --color-primary-foreground: oklch(1 0 0);
  --color-secondary: oklch(0.88 0.06 84);
  --color-secondary-foreground: var(--slate-950);
  --color-muted: oklch(0.88 0.06 84);
  --color-muted-foreground: var(--slate-700);
  --color-accent: oklch(0.88 0.06 84);
  --color-accent-foreground: var(--slate-950);
  --color-destructive: var(--red-500);
  --color-destructive-foreground: oklch(1 0 0);
  --color-border: oklch(0.82 0.10 84);
  --color-ring: var(--slate-950);

  --wp--preset--color--background: oklch(0.92 0.08 84);
  --wp--preset--color--foreground: var(--slate-950);
  --wp--preset--color--card: oklch(0.96 0.04 84);
  --wp--preset--color--card-foreground: var(--slate-950);
  --wp--preset--color--primary: var(--slate-950);
  --wp--preset--color--primary-foreground: oklch(1 0 0);
  --wp--preset--color--secondary: oklch(0.88 0.06 84);
  --wp--preset--color--secondary-foreground: var(--slate-950);
  --wp--preset--color--muted: oklch(0.88 0.06 84);
  --wp--preset--color--muted-foreground: var(--slate-700);
  --wp--preset--color--accent: oklch(0.88 0.06 84);
  --wp--preset--color--accent-foreground: var(--slate-950);
  --wp--preset--color--destructive: var(--red-500);
  --wp--preset--color--destructive-foreground: oklch(1 0 0);
  --wp--preset--color--border: oklch(0.82 0.10 84);
  --wp--preset--color--ring: var(--slate-950);

  background-color: var(--background);
  color: var(--foreground);
}

/* ==========================================================================
   LINK COLOR — Ensure links inherit the scope's foreground color.
   WordPress editor may apply its own link color that ignores scoped
   custom properties. This forces links to use the scope's foreground.
   ========================================================================== */

.is-style-dark a:not(.wp-block-button__link),
.is-style-light a:not(.wp-block-button__link),
.is-style-silver a:not(.wp-block-button__link),
.is-style-silver-dark a:not(.wp-block-button__link),
.is-style-silver-light a:not(.wp-block-button__link),
.is-style-amber a:not(.wp-block-button__link),
.is-style-amber-dark a:not(.wp-block-button__link),
.is-style-amber-light a:not(.wp-block-button__link) {
  color: var(--foreground);
}