/* ===== Warm Elegant — Dark Mode =====
   Warm brown-black palette, not flat neutral black
   All pairings pass WCAG AA (4.5:1 body, 3:1 large text)
   ======================================= */

body.dark {
  /* Surfaces */
  --color-surface-primary: #1C1917;       /* warm near-black base (13.2:1 for text) */
  --color-surface-secondary: #231F1D;     /* alternate sections */
  --color-surface-card: #2C2725;          /* cards, elevated surfaces */

  /* Text */
  --color-text-primary: #EDE8E2;          /* body text, headings */
  --color-text-secondary: #A89E96;        /* captions, meta (6.7:1 on base) */

  /* Accent — taupe */
  --color-accent-primary: #B8A596;        /* buttons, links (7.8:1 on base) */
  --color-accent-primary-hover: #CBBCAE;  /* hover states (9.7:1 on base) */

  /* Accent — sage */
  --color-accent-secondary: #7DB8A5;      /* tags, badges (7.4:1 on base) */

  /* Border */
  --color-border: #3D3633;               /* dividers, card borders */

  /* ===== Pico CSS bridge (reset/normalize/forms) ===== */
  --pico-background-color: var(--color-surface-primary);
  --pico-color: var(--color-text-primary);
  background-color: var(--pico-background-color);
  color: var(--pico-color);

  --pico-muted-color: var(--color-text-secondary);
  --pico-muted-border-color: var(--color-border);
  --pico-border-color: var(--color-border);

  --pico-primary: var(--color-accent-primary);
  --pico-primary-hover: var(--color-accent-primary-hover);
  --pico-primary-focus: rgba(184, 165, 150, 0.25);
  --pico-primary-inverse: #1C1917;

  --pico-secondary: var(--color-accent-secondary);
  --pico-secondary-hover: #93CCB9;
  --pico-secondary-focus: rgba(125, 184, 165, 0.25);
  --pico-secondary-inverse: #1C1917;

  --pico-contrast: var(--color-text-primary);
  --pico-contrast-inverse: var(--color-surface-primary);

  /* Card */
  --pico-card-background-color: var(--color-surface-card);
  --pico-card-border-color: var(--color-border);
  --pico-card-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  --pico-card-sectioning-background-color: var(--color-surface-secondary);

  /* Forms */
  --pico-form-element-background-color: var(--color-surface-card);
  --pico-form-element-border-color: var(--color-border);
  --pico-form-element-active-border-color: var(--color-accent-primary);
  --pico-form-element-color: var(--color-text-primary);
  --pico-form-element-placeholder-color: var(--color-text-secondary);
  --pico-form-element-active-background-color: var(--color-surface-card);
  --pico-form-element-focus-color: var(--color-accent-primary);

  /* Dropdown */
  --pico-dropdown-background-color: var(--color-surface-card);
  --pico-dropdown-border-color: var(--color-border);
  --pico-dropdown-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  --pico-dropdown-color: var(--color-text-primary);
  --pico-dropdown-hover-background-color: var(--color-surface-secondary);

  /* Mark */
  --pico-mark-background-color: rgba(125, 184, 165, 0.2);
  --pico-mark-color: var(--color-text-primary);

  /* Code */
  --pico-code-background-color: var(--color-surface-secondary);
  --pico-code-color: var(--color-text-primary);

  /* Table */
  --pico-table-border-color: var(--color-border);
  --pico-table-row-stripped-background-color: var(--color-surface-secondary);
}