/* =========================================================
   ChrysoKit, Light Theme
   Explicit light-mode variable overrides. Matches the
   original warm editorial palette exactly.
   ========================================================= */

html[data-theme="light"] {
  --primary: #D4A373;
  --primary-dark: #B8895E;
  --primary-darker: #8F6A44;
  --secondary-bg: #FAEDCD;
  --page-bg: #FEFAE0;
  --text: #2C2C2C;
  --text-muted: #6B6B6B;
  --text-subtle: #9A9A9A;
  --success: #CCD5AE;
  --success-dark: #A8B288;
  --success-darker: #7E8B66;
  --border: #E9E9E9;
  --border-warm: #E8DFCA;
  --white: #FFFFFF;
  --danger: #C97B63;
  --warning: #E0A458;

  --shadow-xs: 0 1px 2px rgba(60, 42, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(60, 42, 24, 0.06), 0 1px 2px rgba(60, 42, 24, 0.04);
  --shadow: 0 4px 10px rgba(60, 42, 24, 0.06), 0 2px 4px rgba(60, 42, 24, 0.04);
  --shadow-md: 0 8px 20px rgba(60, 42, 24, 0.08), 0 4px 8px rgba(60, 42, 24, 0.04);
  --shadow-lg: 0 16px 36px rgba(60, 42, 24, 0.10), 0 6px 12px rgba(60, 42, 24, 0.05);
  --shadow-focus: 0 0 0 3px rgba(212, 163, 115, 0.28);
}

html[data-theme="light"] body {
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(212, 163, 115, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(204, 213, 174, 0.14), transparent 60%);
}

html[data-theme="light"] .site-header {
  background-color: rgba(254, 250, 224, 0.82);
}