/* ==========================================================================
   Prompt Genie — design tokens (Elegant Luxury)
   Layer 2 of 5: pico.min.css -> themes.css -> base.css -> components.css -> pages.css
   Brand rule: Pico is restyled ONLY by overriding --pico-* variables here.
   Palette seeded from the logo concept: deep gold/brass, charcoal, ivory.
   ========================================================================== */

:root {
  --pg-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --pg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pico-font-family: var(--pg-font-body);
  --pico-border-radius: 10px;
  --pico-transition: 0.2s ease-in-out;
}

/* --------------------------------------------------------------------------
   Dark — the brand's primary face. Also the :root fallback so a page never
   renders unthemed (the inline head script sets data-theme before paint).
   -------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --pg-bg: #171a1f;
  --pg-surface: #1f242c;
  --pg-surface-2: #272d37;
  --pg-ink: #ede6d4;
  --pg-ink-muted: #b0a892;
  --pg-gold: #c9a45c;         /* large elements, icons, borders */
  --pg-gold-bright: #e6c987;  /* champagne: text-sized gold, links (>=4.5:1 on bg) */
  --pg-gold-deep: #8f7434;    /* dividers, subtle accents */
  --pg-gold-ink: #221a07;     /* text on gold backgrounds */
  --pg-border: #343a44;
  --pg-mark-contrast: #d9d2c0; /* the wand in the logo mark */
  --pg-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
  --pg-header-bg: rgb(23 26 31 / 0.92);

  /* semantic status (tool results: severity chips, feedback cards) */
  --pg-ok: #7fc796;
  --pg-ok-bg: rgb(94 178 126 / 0.14);
  --pg-warn: #d9b563;
  --pg-warn-bg: rgb(217 164 65 / 0.13);
  --pg-err: #e08d95;
  --pg-err-bg: rgb(220 90 100 / 0.13);
  --pg-info: #e6c987;
  --pg-info-bg: rgb(201 164 92 / 0.12);
  --pg-ok-solid: #6fbc8a;
  --pg-warn-solid: #d9a743;
  --pg-err-solid: #d97a84;
  --pg-accent-solid: #c9a45c;
  --pg-on-solid: #171a1f;

  --pico-background-color: var(--pg-bg);
  --pico-color: var(--pg-ink);
  --pico-muted-color: var(--pg-ink-muted);
  --pico-muted-border-color: var(--pg-border);

  --pico-h1-color: var(--pg-ink);
  --pico-h2-color: var(--pg-ink);
  --pico-h3-color: var(--pg-ink);
  --pico-h4-color: var(--pg-ink);
  --pico-h5-color: var(--pg-ink);
  --pico-h6-color: var(--pg-ink-muted);

  --pico-primary: var(--pg-gold-bright);
  --pico-primary-background: var(--pg-gold);
  --pico-primary-border: var(--pg-gold);
  --pico-primary-underline: rgb(230 201 135 / 0.4);
  --pico-primary-hover: #f0d79c;
  --pico-primary-hover-background: #d6b46e;
  --pico-primary-hover-border: #d6b46e;
  --pico-primary-focus: rgb(201 164 92 / 0.35);
  --pico-primary-inverse: var(--pg-gold-ink);

  --pico-secondary: var(--pg-ink-muted);
  --pico-secondary-background: var(--pg-surface-2);
  --pico-secondary-border: var(--pg-border);
  --pico-secondary-hover: var(--pg-ink);
  --pico-secondary-inverse: var(--pg-ink);

  --pico-card-background-color: var(--pg-surface);
  --pico-card-border-color: var(--pg-border);
  --pico-card-box-shadow: var(--pg-shadow);
  --pico-card-sectioning-background-color: var(--pg-surface-2);

  --pico-form-element-background-color: var(--pg-surface);
  --pico-form-element-border-color: var(--pg-border);
  --pico-form-element-color: var(--pg-ink);
  --pico-form-element-placeholder-color: var(--pg-ink-muted);
  --pico-form-element-active-background-color: var(--pg-surface);
  --pico-form-element-active-border-color: var(--pg-gold);
  --pico-form-element-focus-color: rgb(201 164 92 / 0.35);

  --pico-mark-background-color: var(--pg-gold-deep);
  --pico-mark-color: var(--pg-ink);
  --pico-code-background-color: var(--pg-surface-2);
  --pico-code-color: var(--pg-gold-bright);
}

/* --------------------------------------------------------------------------
   Light — crafted ivory variant, not an inversion afterthought.
   Gold darkens to stay readable on ivory (text gold >=4.5:1).
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --pg-bg: #f6f1e5;
  --pg-surface: #fdfaf1;
  --pg-surface-2: #efe8d7;
  --pg-ink: #23282f;
  --pg-ink-muted: #6b6452;
  --pg-gold: #a9863a;
  --pg-gold-bright: #7a5f22;
  --pg-gold-deep: #c9b078;
  --pg-gold-ink: #201803;
  --pg-border: #ddd3bc;
  --pg-mark-contrast: #3a4049;
  --pg-shadow: 0 10px 28px rgb(96 78 38 / 0.14);
  --pg-header-bg: rgb(246 241 229 / 0.92);

  /* semantic status (tool results: severity chips, feedback cards) */
  --pg-ok: #276b43;
  --pg-ok-bg: rgb(46 125 79 / 0.10);
  --pg-warn: #7f5c10;
  --pg-warn-bg: rgb(160 120 30 / 0.12);
  --pg-err: #b23844;
  --pg-err-bg: rgb(178 56 68 / 0.09);
  --pg-info: #7a5f22;
  --pg-info-bg: rgb(122 95 34 / 0.10);
  --pg-ok-solid: #2e7d4f;
  --pg-warn-solid: #7d5c0d;
  --pg-err-solid: #b23844;
  --pg-accent-solid: #a9863a;
  --pg-on-solid: #f7f3e9;

  --pico-background-color: var(--pg-bg);
  --pico-color: var(--pg-ink);
  --pico-muted-color: var(--pg-ink-muted);
  --pico-muted-border-color: var(--pg-border);

  --pico-h1-color: var(--pg-ink);
  --pico-h2-color: var(--pg-ink);
  --pico-h3-color: var(--pg-ink);
  --pico-h4-color: var(--pg-ink);
  --pico-h5-color: var(--pg-ink);
  --pico-h6-color: var(--pg-ink-muted);

  --pico-primary: var(--pg-gold-bright);
  --pico-primary-background: var(--pg-gold);
  --pico-primary-border: var(--pg-gold);
  --pico-primary-underline: rgb(122 95 34 / 0.4);
  --pico-primary-hover: #644d1a;
  --pico-primary-hover-background: #97772f;
  --pico-primary-hover-border: #97772f;
  --pico-primary-focus: rgb(169 134 58 / 0.3);
  --pico-primary-inverse: #fdfaf1;

  --pico-secondary: var(--pg-ink-muted);
  --pico-secondary-background: var(--pg-surface-2);
  --pico-secondary-border: var(--pg-border);
  --pico-secondary-hover: var(--pg-ink);
  --pico-secondary-inverse: var(--pg-ink);

  --pico-card-background-color: var(--pg-surface);
  --pico-card-border-color: var(--pg-border);
  --pico-card-box-shadow: var(--pg-shadow);
  --pico-card-sectioning-background-color: var(--pg-surface-2);

  --pico-form-element-background-color: var(--pg-surface);
  --pico-form-element-border-color: var(--pg-border);
  --pico-form-element-color: var(--pg-ink);
  --pico-form-element-placeholder-color: var(--pg-ink-muted);
  --pico-form-element-active-background-color: var(--pg-surface);
  --pico-form-element-active-border-color: var(--pg-gold);
  --pico-form-element-focus-color: rgb(169 134 58 / 0.3);

  --pico-mark-background-color: #efe0bb;
  --pico-mark-color: var(--pg-ink);
  --pico-code-background-color: var(--pg-surface-2);
  --pico-code-color: var(--pg-gold-bright);
}