/**
 * 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.
 *
 * IMPORTANT: The palette vars below (:root block) are duplicated from
 * theme.css so they're available inside the WordPress editor iframe.
 * add_editor_style() transforms :root → .editor-styles-wrapper, but
 * Tailwind's @layer theme { :root,:host { ... } } may not be processed
 * correctly by WordPress's CSS parser. This :root block guarantees
 * the vars resolve in both frontend and editor.
 */

/* ==========================================================================
   PALETTE — Raw OKLCH values (mirrors theme.css :root)
   Required here so var() references resolve in the editor iframe.
   ========================================================================== */

:root {
  /* Resume Place brand ramp (mirrors theme.css :root) */
  --rp-tangelo:      #F94D00;
  --rp-mahogany:     #C04000;
  --rp-spiced-tea:   #B35C44;
  --rp-deep-blue:    #1C3664;
  --rp-evening-blue: #0F264C;
  --rp-midnight:     #223240;
  --rp-rich-gray:    #010203;
  --rp-dark-gray:    #5B5E60;
  --rp-light-gray:   #D2D9DB;
  --rp-paper:        #FAF6F0;
  --rp-paper-muted:  #F4F0E9;
  --rp-paper-border: #E5DFD4;
  --rp-white:        #FFFFFF;

  --neutral-50:  #FAF6F0;
  --neutral-100: #F4F0E9;
  --neutral-200: #E5DFD4;
  --neutral-300: #D2D9DB;
  --neutral-400: #A7A9A4;
  --neutral-500: #5B5E60;
  --neutral-600: #44474A;
  --neutral-700: #2F3236;
  --neutral-800: #1C1F22;
  --neutral-900: #010203;

  /* Legacy aliases remapped onto the warm RP ramp */
  --slate-50:  var(--neutral-50);
  --slate-100: var(--neutral-100);
  --slate-200: var(--neutral-200);
  --slate-300: var(--neutral-300);
  --slate-400: var(--neutral-400);
  --slate-500: var(--neutral-500);
  --slate-600: var(--neutral-600);
  --slate-700: var(--neutral-700);
  --slate-800: var(--neutral-800);
  --slate-900: var(--rp-rich-gray);
  --slate-950: var(--rp-rich-gray);

  --vg-50:  var(--neutral-50);
  --vg-100: var(--neutral-100);
  --vg-200: var(--neutral-200);
  --vg-300: var(--neutral-300);
  --vg-400: var(--neutral-400);
  --vg-500: var(--neutral-500);
  --vg-600: var(--neutral-600);
  --vg-700: var(--neutral-700);
  --vg-800: var(--neutral-800);
  --vg-900: var(--neutral-900);
  --vg-950: var(--rp-rich-gray);

  --amber-500: var(--rp-tangelo);
  --red-500:   var(--rp-mahogany);
  --red-900:   var(--rp-mahogany);
}

/* ==========================================================================
   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);
}