/* ===== Warm Elegant — Light Mode =====
   Color palette: cream/taupe base + muted teal/sage accent
   All pairings pass WCAG AA (4.5:1 body, 3:1 large text)
   ======================================= */

body.light {
  /* Surfaces */
  --color-surface-primary: #FAF7F2;       /* page base */
  --color-surface-secondary: #F0EBE3;     /* alternate sections */
  --color-surface-card: #FFFFFF;           /* cards, elevated surfaces */

  /* Text */
  --color-text-primary: #3B3536;          /* body text, headings (10.3:1 on base) */
  --color-text-secondary: #6B6162;        /* captions, meta (5.0:1 on base) */

  /* Accent — taupe */
  --color-accent-primary: #7A6B5D;        /* buttons, links (4.6:1 on base) */
  --color-accent-primary-hover: #5E4F42;  /* hover states (7.0:1 on base) */

  /* Accent — sage */
  --color-accent-secondary: #5E8A7B;      /* tags, badges, highlights (3.4:1 large text) */
  --color-accent-secondary-dark: #4A7265; /* sage for small text (4.6:1 on base) */

  /* Border */
  --color-border: #D9D0C7;               /* 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(122, 107, 93, 0.25);
  --pico-primary-inverse: #FFFFFF;

  --pico-secondary: var(--color-accent-secondary);
  --pico-secondary-hover: var(--color-accent-secondary-dark);
  --pico-secondary-focus: rgba(94, 138, 123, 0.25);
  --pico-secondary-inverse: #FFFFFF;

  --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(59, 53, 54, 0.06);
  --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(59, 53, 54, 0.1);
  --pico-dropdown-color: var(--color-text-primary);
  --pico-dropdown-hover-background-color: var(--color-surface-secondary);

  /* Mark */
  --pico-mark-background-color: rgba(94, 138, 123, 0.15);
  --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);
}