/* ============================================================
   variables.css — shared variables
   CHANGES vs original:
   1. --max-w → 1280px (was 820px) — supports proper desktop layout
   2. Light-theme text colors meet WCAG AA contrast on shared surfaces.
   Everything else is identical to original.
   ============================================================ */

:root {
  --bg:            #f8f7f5;
  --bg-secondary:  #ffffff;
  --bg-alt:        #ffffff;
  --card-bg:       #ffffff;
  --card-border:   #e8e4df;
  --text:          #1a1a1a;
  --text-muted:    #5a5a5a;
  --text-subtle:   #6b6b6b;
  --input-bg:      #f4f2ef;
  --input-border:  #ddd9d4;
  --nav-bg:        rgba(248,247,245,0.95);
  --shadow:        0 4px 32px rgba(0,0,0,0.08);
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.05);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.09);
  --shadow-hover:  0 12px 48px rgba(0,0,0,0.14);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.14);
  --primary:       #1a1a1a;
  --primary-dark:  #000000;
  --primary-light: rgba(26,26,26,0.07);
  --primary-accent:#80652d;
  --accent:        #80652d;
  --accent-light:  rgba(201,169,110,0.12);
  --cta-green:     #16a34a;
  --cta-red:       #dc2626;
  --radius-sm:     10px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --transition:    0.25s cubic-bezier(0.4,0,0.2,1);
  --white:         #ffffff;
  --success:       #22c55e;
  --success-light: rgba(34,197,94,0.10);
  --error:         #ef4444;
  --error-light:   rgba(239,68,68,0.10);
  --warn-bg:       #fffbeb;
  --warn-border:   #d97706;
  --danger-bg:     #fef2f2;
  --danger-border: #dc2626;
  /* FIX 1: widened max-width for proper desktop layout */
  --max-w:         1280px;
  --danger:        #dc2626;
  --danger-light:  rgba(220,38,38,0.06);
}

[data-theme="dark"] {
  --bg:            #0e0e0e;
  --bg-secondary:  #161616;
  --bg-alt:        #141414;
  --card-bg:       #1c1c1c;
  --card-border:   rgba(255,255,255,0.07);
  --text:          #f0ede8;
  --text-muted:    rgba(240,237,232,0.72);
  --text-subtle:   rgba(240,237,232,0.52);
  --input-bg:      rgba(255,255,255,0.05);
  --input-border:  rgba(255,255,255,0.1);
  --nav-bg:        rgba(14,14,14,0.95);
  --shadow:        0 4px 32px rgba(0,0,0,0.5);
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.4);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.6);
  --shadow-hover:  0 12px 48px rgba(0,0,0,0.7);
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.8);
  --primary:       #c9a96e;
  --primary-dark:  #b8956a;
  --primary-light: rgba(201,169,110,0.12);
  --primary-accent:#c9a96e;
  --accent:        #c9a96e;
  --accent-light:  rgba(201,169,110,0.12);
  --cta-green:     #16a34a;
  --cta-red:       #dc2626;
  --success:       #22c55e;
  --success-light: rgba(34,197,94,0.08);
  --error:         #ef4444;
  --error-light:   rgba(239,68,68,0.08);
  --warn-bg:       rgba(217,119,6,0.10);
  --warn-border:   #d97706;
  --danger-bg:     rgba(220,38,38,0.08);
  --danger-border: #dc2626;
  --danger:        #dc2626;
  --danger-light:  rgba(220,38,38,0.08);
}