/* ════════════════════════════════════════════════════════
   PetCare — Design tokens (light + dark)
   All CSS custom properties live here. Do not put layout
   or component rules in this file.
   ════════════════════════════════════════════════════════ */

/* ══ LIGHT MODE TOKENS ══ */
[data-theme="light"] {
  --bg:          #FFFBF3;
  --bg-2:        #FFFFFF;
  --bg-3:        #FFF5E8;
  --bg-card:     #FFFFFF;
  --border:      #EDE8DF;
  --border-2:    rgba(255,140,66,.15);
  --text:        #2E1F14;
  --text-m:      #6B4E3A;
  --text-muted:  #835A41;
  --orange:      #E06A1A;
  --orange-l:    #FF8C42;
  --orange-ll:   #FFB07C;
  --orange-d:    #B8480F;
  --green:       #4CAF70;
  --green-d:     #357A52;
  --green-l:     #E6F7EC;
  --sand:        #FFF0DC;
  --sand-d:      #F5E0C0;
  --nav-bg:      rgba(255,251,243,.96);
  --nav-text:    #6B4E3A;
  --nav-text-h:  #2E1F14;
  --hero-bg-1:   #3D2060;
  --hero-bg-2:   #1E3068;
  --hero-bg-3:   #1a4a7a;
  --hero-scene-1:#0C4A6E;
  --hero-scene-2:#38BDF8;
  --hero-scene-3:#FED7AA;
  --hero-text:   #FFFFFF;
  --hero-muted:  rgba(255,255,255,0.82);
  --shadow-sm:   0 2px 12px rgba(46,31,20,.07);
  --shadow:      0 6px 28px rgba(46,31,20,.11);
  --shadow-lg:   0 16px 56px rgba(46,31,20,.18);
  --pill-bg:     rgba(255,140,66,.12);
  --pill-text:   #B8480F;
  --section-tag: #E06A1A;
  --press-outlet:#2E1F14;
  --footer-bg:   #2E1F14;
  --footer-text: rgba(255,255,255,.5);
  --footer-h:    rgba(255,255,255,.4);
  --toggle-bg:   #2E1F14;
  --toggle-icon: "🌙";
}

/* ══ DARK MODE TOKENS ══ */
[data-theme="dark"] {
  --bg:          #12100E;
  --bg-2:        #1C1915;
  --bg-3:        #201D19;
  --bg-card:     #231F1B;
  --border:      rgba(255,140,66,.12);
  --border-2:    rgba(255,140,66,.18);
  --text:        #F5EDE4;
  --text-m:      #C8A88A;
  --text-muted:  #A8836A;
  --orange:      #FF8C42;
  --orange-l:    #FFB07C;
  --orange-ll:   #FFCFA0;
  --orange-d:    #E06A1A;
  --green:       #56C278;
  --green-d:     #3A9A5C;
  --green-l:     rgba(56,194,120,.12);
  --sand:        rgba(255,140,66,.1);
  --sand-d:      rgba(255,140,66,.15);
  --nav-bg:      rgba(18,16,14,.96);
  --nav-text:    rgba(245,237,228,.65);
  --nav-text-h:  #F5EDE4;
  --hero-bg-1:   #2a1540;
  --hero-bg-2:   #101828;
  --hero-bg-3:   #0d2030;
  --hero-text:   #FFFFFF;
  --hero-muted:  rgba(255,255,255,0.65);
  --shadow-sm:   0 2px 12px rgba(0,0,0,.3);
  --shadow:      0 6px 28px rgba(0,0,0,.4);
  --shadow-lg:   0 16px 56px rgba(0,0,0,.55);
  --pill-bg:     rgba(255,140,66,.15);
  --pill-text:   #FFB07C;
  --section-tag: #FF8C42;
  --press-outlet:#F5EDE4;
  --footer-bg:   #0C0A08;
  --footer-text: rgba(245,237,228,.45);
  --footer-h:    rgba(245,237,228,.3);
  --toggle-bg:   #FF8C42;
  --toggle-icon: "☀️";
  --hero-scene-1:#3D2060;
  --hero-scene-2:#1E3068;
  --hero-scene-3:#1a4a7a;
}