[data-theme="light"], :root {
  --color-bg-primary:    #FAF7F2;
  --color-bg-secondary:  #F2EDE5;
  --color-bg-card:       #FFFFFF;
  --color-bg-input:      #FFFFFF;

  --color-text-primary:  #3D2B1F;
  --color-text-secondary:#8B7355;
  --color-text-muted:    #C4B49A;
  --color-text-inverse:  #FFFFFF;

  --color-accent:        #7A9E7E;
  --color-accent-dark:   #5A7A5E;
  --color-accent-light:  #A8C5A0;
  --color-accent-xlight: #E8F2E8;

  --color-border:        #E2DDD6;
  --color-border-strong: #C4B49A;

  --color-success:       #7A9E7E;
  --color-warning:       #C9953A;
  --color-danger:        #C0574A;
  --color-info:          #5A8FA8;

  --color-shadow:        rgba(61, 43, 31, 0.08);
  --color-shadow-strong: rgba(61, 43, 31, 0.16);

  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 4px 16px var(--color-shadow);
  --shadow-lg: 0 8px 32px var(--color-shadow-strong);
}

[data-theme="dark"] {
  --color-bg-primary:    #1C1410;
  --color-bg-secondary:  #251C15;
  --color-bg-card:       #2A2018;
  --color-bg-input:      #332820;
  --color-text-primary:  #F0EAE0;
  --color-text-secondary:#B8A080;
  --color-text-muted:    #7A6550;
  --color-text-inverse:  #1C1410;
  --color-accent:        #8DB891;
  --color-accent-dark:   #6A9A6E;
  --color-accent-light:  #B5D0B8;
  --color-accent-xlight: #1E2E1F;
  --color-border:        #3D3028;
  --color-border-strong: #5A4535;
  --color-warning:       #D4A855;
  --color-danger:        #D06858;
  --color-shadow:        rgba(0, 0, 0, 0.3);
  --color-shadow-strong: rgba(0, 0, 0, 0.5);
  --logo-plate-bg:   #2A2018;
  --logo-plate-rim:  #3D3028;
  --logo-plate-rim2: #332820;
  --logo-plate-fill: #252015;
  --logo-shadow:     transparent;
  --logo-brown:      #F0EAE0;
  --logo-brown-mid:  #B8A080;
  --logo-brown-light:#7A6550;
}

[data-theme="girlie"] {
  --color-bg-primary:    #FFF0F5;
  --color-bg-secondary:  #FFE4EE;
  --color-bg-card:       #FFFFFF;
  --color-bg-input:      #FFFFFF;
  --color-text-primary:  #6B2D42;
  --color-text-secondary:#B07088;
  --color-text-muted:    #E4B8C8;
  --color-text-inverse:  #FFFFFF;
  --color-accent:        #E8829A;
  --color-accent-dark:   #C45C76;
  --color-accent-light:  #F2AABF;
  --color-accent-xlight: #FFF0F5;
  --color-border:        #FAD4E2;
  --color-border-strong: #F2AABF;
  --color-shadow:        rgba(107, 45, 66, 0.08);
  --color-shadow-strong: rgba(107, 45, 66, 0.16);
  --logo-green:       #E8829A;
  --logo-green-dark:  #C45C76;
  --logo-green-light: #F2AABF;
  --logo-brown:       #6B2D42;
  --logo-brown-mid:   #B07088;
  --logo-brown-light: #E4B8C8;
  --logo-stem:        #C47090;
  --logo-plate-rim:   #F5C6D6;
  --logo-plate-rim2:  #FAE0E8;
  --logo-shadow:      #F2AABF;
}

/* ── Semantic soft backgrounds + macro colors (v2) ──
   Chaque macro a sa couleur signature, déclinée par thème.
   Les *-bg sont les fonds pastels des badges/jauges/bannières. */
:root, [data-theme="light"] {
  --color-success:    #7A9E7E;
  --color-info:       #5A8FA8;
  --color-success-bg: #E9F1E6;
  --color-warning-bg: #F6EDDA;
  --color-danger-bg:  #F6E4E0;
  --color-info-bg:    #E4EEF3;

  --macro-cal:   #C9953A;  --macro-cal-bg:   #F6EDDA;
  --macro-prot:  #6E9E73;  --macro-prot-bg:  #E9F1E6;
  --macro-carb:  #5A8FA8;  --macro-carb-bg:  #E4EEF3;
  --macro-fat:   #C4687A;  --macro-fat-bg:   #F7E7EB;
  --macro-fiber: #8E7BA8;  --macro-fiber-bg: #EFEAF5;

  --nav-glass: rgba(255, 255, 255, 0.82);
}

[data-theme="dark"] {
  --color-success:    #8DB891;
  --color-info:       #7FB3CC;
  --color-success-bg: rgba(141, 184, 145, 0.14);
  --color-warning-bg: rgba(212, 168, 85, 0.14);
  --color-danger-bg:  rgba(208, 104, 88, 0.14);
  --color-info-bg:    rgba(127, 179, 204, 0.14);

  --macro-cal:   #D4A855;  --macro-cal-bg:   rgba(212, 168, 85, 0.16);
  --macro-prot:  #8DB891;  --macro-prot-bg:  rgba(141, 184, 145, 0.16);
  --macro-carb:  #7FB3CC;  --macro-carb-bg:  rgba(127, 179, 204, 0.16);
  --macro-fat:   #D98A9C;  --macro-fat-bg:   rgba(217, 138, 156, 0.16);
  --macro-fiber: #AC9CC7;  --macro-fiber-bg: rgba(172, 156, 199, 0.16);

  --nav-glass: rgba(42, 32, 24, 0.82);
}

[data-theme="girlie"] {
  --color-success:    #7A9E7E;
  --color-info:       #5A8FA8;
  --color-success-bg: #E9F1E6;
  --color-warning-bg: #F9EDDF;
  --color-danger-bg:  #FAE3E7;
  --color-info-bg:    #E4EEF3;

  --macro-cal:   #D9955A;  --macro-cal-bg:   #F9EDDF;
  --macro-prot:  #6E9E73;  --macro-prot-bg:  #E9F1E6;
  --macro-carb:  #5A8FA8;  --macro-carb-bg:  #E4EEF3;
  --macro-fat:   #E8829A;  --macro-fat-bg:   #FCE4EB;
  --macro-fiber: #A87BB8;  --macro-fiber-bg: #F3EAF7;

  --nav-glass: rgba(255, 255, 255, 0.85);
}

*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.15s ease, box-shadow 0.2s ease;
}