/* Design tokens — M3 role colors with Whole Foods Market overlay.
 * Light / dark mode resolution happens at :root[data-theme="..."]. */

:root {
  /* ---- Whole Foods brand anchors ---- */
  --wf-green-900: #003D1F;
  --wf-green-800: #005229;
  --wf-green-700: #006838; /* primary brand */
  --wf-green-500: #2A8C58;
  --wf-green-200: #B8D6C1;
  --wf-green-100: #D8EBDD;
  --wf-green-050: #EEF5EF;
  --wf-cream-100: #F7F0DF; /* warmer cream */
  --wf-cream-050: #FBF5E8;
  --wf-cream-025: #FEFAEF;
  --wf-paper:     #FFFDF6;
  --wf-clay-900:  #6E3317;
  --wf-clay-700:  #A8502B; /* terracotta accent */
  --wf-clay-500:  #C2714A;
  --wf-clay-100:  #F0DFD2;
  --wf-charcoal:  #2B2B2B;
  --wf-ink:       #1E1E1E;

  /* ---- Material 3 state-layer opacities ---- */
  --state-hover:   0.08;
  --state-focus:   0.12;
  --state-press:   0.12;

  /* ---- Shape scale (M3) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ---- Spacing (4pt grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Type scale (M3-aligned) ---- */
  --type-display-lg:  57px;
  --type-display-md:  45px;
  --type-display-sm:  36px;
  --type-headline-lg: 32px;
  --type-headline-md: 28px;
  --type-headline-sm: 24px;
  --type-title-lg:    22px;
  --type-title-md:    16px;
  --type-title-sm:    14px;
  --type-body-lg:     16px;
  --type-body-md:     14px;
  --type-body-sm:     12px;
  --type-label-lg:    14px;
  --type-label-md:    12px;
  --type-label-sm:    11px;

  --font-display: "Google Sans Flex", "Google Sans", "Roboto Flex", "Roboto", system-ui, sans-serif;
  --font-body:    "Roboto Flex", "Roboto", system-ui, sans-serif;

  /* ---- Motion (M3 emphasized easing / durations) ---- */
  --easing-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --easing-emphasized: cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --easing-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --duration-short:   150ms;
  --duration-medium:  300ms;
  --duration-long:    500ms;
}

/* -------- Light theme -------- */
:root[data-theme="light"],
:root[data-theme="auto"]:not([data-dark-os="true"]) {
  --color-primary:        var(--wf-green-700);
  --color-on-primary:     #FFFFFF;
  --color-primary-container: var(--wf-green-100);
  --color-on-primary-container: var(--wf-green-900);

  --color-surface:        var(--wf-cream-025);
  --color-surface-container: var(--wf-paper);
  --color-surface-container-high: #FFFFFF;
  --color-surface-variant: var(--wf-cream-100);

  --color-on-surface:      var(--wf-ink);
  --color-on-surface-variant: #5A4E3A;
  --color-outline:         #B8A88A;
  --color-outline-variant: #E6DBC3;

  --color-accent:          var(--wf-clay-700);
  --color-error:           #B3261E;
  --color-scrim:           rgba(0, 0, 0, 0.35);
}

/* -------- Dark theme -------- */
:root[data-theme="dark"],
:root[data-theme="auto"][data-dark-os="true"] {
  --color-primary:        var(--wf-green-500);
  --color-on-primary:     var(--wf-green-900);
  --color-primary-container: #1B3826;
  --color-on-primary-container: var(--wf-green-100);

  --color-surface:        #0F1410;
  --color-surface-container: #18201A;
  --color-surface-container-high: #232C25;
  --color-surface-variant: #2B3229;

  --color-on-surface:      #F1EBDA;
  --color-on-surface-variant: #C6BCA5;
  --color-outline:         #6E6956;
  --color-outline-variant: #3A3A2E;

  --color-accent:          var(--wf-clay-500);
  --color-error:           #F2B8B5;
  --color-scrim:           rgba(0, 0, 0, 0.55);
}