/* ═══════════════════════════════════════════════════════════════════
   M3 Design Tokens — Brand Colors
   Platform: Neutral | KIN: Calm Safety Teal | VinePlus: Growth Green
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Platform Neutral */
    --color-m3-primary: #6B7280;
    --color-m3-on-primary: #FFFFFF;
    --color-m3-primary-container: #F3F4F6;
    --color-m3-on-primary-container: #1F2937;
    --color-m3-surface: #FFFFFF;
    --color-m3-on-surface: #1D1B20;
    --color-m3-surface-variant: #F3F4F6;
    --color-m3-on-surface-variant: #6B7280;
    --color-m3-surface-container: #F8FAFC;
    --color-m3-surface-container-high: #F3F4F6;
    --color-m3-background: #F8FAFC;
    --color-m3-error: #DC2626;
    --color-m3-on-error: #FFFFFF;
    --color-m3-error-container: #FEE2E2;
    --color-m3-on-error-container: #7F1D1D;
    --color-m3-success: #16A34A;
    --color-m3-warning: #F59E0B;
    --color-m3-outline: #D1D5DB;
    --color-m3-outline-variant: #E5E7EB;
    --font-m3-display-large: 700 3.5625rem/4rem var(--font-sans);
    --font-m3-headline-medium: 600 1.75rem/2.25rem var(--font-sans);
    --font-m3-title-large: 600 1.375rem/1.75rem var(--font-sans);
    --font-m3-title-medium: 500 1rem/1.5rem var(--font-sans);
    --font-m3-title-small: 500 0.875rem/1.25rem var(--font-sans);
    --font-m3-body-large: 400 1rem/1.5rem var(--font-sans);
    --font-m3-body-medium: 400 0.875rem/1.25rem var(--font-sans);
    --font-m3-body-small: 400 0.75rem/1rem var(--font-sans);
    --font-m3-label-large: 500 0.875rem/1.25rem var(--font-sans);
    --font-m3-label-medium: 500 0.75rem/1rem var(--font-sans);
    --shadow-m3-level-1: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.06);
    --shadow-m3-level-2: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
    --shadow-m3-level-3: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.06);
    --shadow-m3-level-4: 0 20px 25px -5px rgba(0,0,0,0.12), 0 8px 10px -6px rgba(0,0,0,0.06);
    --radius-m3-sm: 0.25rem;
    --radius-m3-md: 0.5rem;
    --radius-m3-lg: 0.75rem;
    --radius-m3-xl: 1.25rem;
    --radius-m3-full: 9999px;
    --duration-m3-short: 150ms;
    --duration-m3-medium: 250ms;
    --duration-m3-long: 350ms;
    --ease-m3-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* KIN — Calm Safety Teal */
[data-theme="kin"] {
    --color-m3-primary: #0F766E;
    --color-m3-on-primary: #FFFFFF;
    --color-m3-primary-container: #CCFBF1;
    --color-m3-on-primary-container: #134E4A;
    --color-m3-secondary: #2563EB;
}

/* VinePlus — Growth Forest Green */
[data-theme="vineplus"] {
    --color-m3-primary: #1DCF9F;
    --color-m3-on-primary: #FFFFFF;
    --color-m3-primary-container: #DCF8C6;
    --color-m3-on-primary-container: #14532D;
    --color-m3-secondary: #0F766E;
    --color-m3-accent: #EAB308;
}

/* ── Utility Classes ── */
.bg-m3-primary { background-color: var(--color-m3-primary); }
.bg-m3-primary-container { background-color: var(--color-m3-primary-container); }
.bg-m3-surface { background-color: var(--color-m3-surface); }
.bg-m3-surface-variant { background-color: var(--color-m3-surface-variant); }
.bg-m3-surface-container { background-color: var(--color-m3-surface-container); }
.bg-m3-error { background-color: var(--color-m3-error); }
.bg-m3-error-container { background-color: var(--color-m3-error-container); }
.bg-m3-success { background-color: var(--color-m3-success); }
.bg-m3-warning { background-color: var(--color-m3-warning); }
.text-m3-on-surface { color: var(--color-m3-on-surface); }
.text-m3-on-surface-variant { color: var(--color-m3-on-surface-variant); }
.text-m3-on-primary { color: var(--color-m3-on-primary); }
.text-m3-primary { color: var(--color-m3-primary); }
.text-m3-error { color: var(--color-m3-error); }
.text-m3-success { color: var(--color-m3-success); }
.text-m3-warning { color: var(--color-m3-warning); }
.shadow-m3-1 { box-shadow: var(--shadow-m3-level-1); }
.shadow-m3-2 { box-shadow: var(--shadow-m3-level-2); }
.shadow-m3-3 { box-shadow: var(--shadow-m3-level-3); }
.shadow-m3-4 { box-shadow: var(--shadow-m3-level-4); }
.rounded-m3-sm { border-radius: var(--radius-m3-sm); }
.rounded-m3-md { border-radius: var(--radius-m3-md); }
.rounded-m3-lg { border-radius: var(--radius-m3-lg); }
.rounded-m3-xl { border-radius: var(--radius-m3-xl); }
.rounded-m3-full { border-radius: var(--radius-m3-full); }
.font-m3-display-large { font: var(--font-m3-display-large); }
.font-m3-headline-medium { font: var(--font-m3-headline-medium); }
.font-m3-title-large { font: var(--font-m3-title-large); }
.font-m3-title-medium { font: var(--font-m3-title-medium); }
.font-m3-title-small { font: var(--font-m3-title-small); }
.font-m3-body-large { font: var(--font-m3-body-large); }
.font-m3-body-medium { font: var(--font-m3-body-medium); }
.font-m3-body-small { font: var(--font-m3-body-small); }
.font-m3-label-large { font: var(--font-m3-label-large); }
.font-m3-label-medium { font: var(--font-m3-label-medium); }
.transition-m3-short { transition: all var(--duration-m3-short) var(--ease-m3-standard); }
.transition-m3-medium { transition: all var(--duration-m3-medium) var(--ease-m3-standard); }
.transition-m3-long { transition: all var(--duration-m3-long) var(--ease-m3-standard); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    font: var(--font-m3-body-medium);
    color: var(--color-m3-on-surface);
    background-color: var(--color-m3-background, #F8FAFC);
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
}
body { min-height: 100dvh; display: flex; flex-direction: column; background-color: var(--color-m3-background, #F8FAFC); }