/**
 * Material 3 Expressive Design Tokens - Tonal Color Themes & Shapes
 * 
 * Themes supported:
 * 1. Botanical Emerald (Default) - Primary #2D6A4F, Secondary #B75D35
 * 2. Terracotta Clay - Primary #B75D35, Secondary #52796F
 * 3. Forest Moss - Primary #386641, Secondary #C57B57
 * 4. Ocean Sage - Primary #19647E, Secondary #EE6C4D
 */

:root {
  /* Alapértelmezett: Botanical Light */
  --md-sys-color-primary: #2D6A4F;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D8F3DC;
  --md-sys-color-on-primary-container: #082015;

  --md-sys-color-secondary: #B75D35;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FDE8E1;
  --md-sys-color-on-secondary-container: #3E1808;

  --md-sys-color-tertiary: #1B4332;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #B7E4C7;
  --md-sys-color-on-tertiary-container: #042013;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-warning: #D97706;
  --md-sys-color-warning-container: #FEF3C7;
  --md-sys-color-on-warning-container: #78350F;

  --md-sys-color-info: #0284C7;
  --md-sys-color-info-container: #E0F2FE;
  --md-sys-color-on-info-container: #0369A1;

  --md-sys-color-background: #FAFDF7;
  --md-sys-color-on-background: #181D19;
  --md-sys-color-surface: #F4F9F2;
  --md-sys-color-on-surface: #181D19;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #EEF4EC;
  --md-sys-color-surface-container: #EAF1E7;
  --md-sys-color-surface-container-high: #E3EBE0;
  --md-sys-color-surface-container-highest: #DDE5DA;
  --md-sys-color-surface-variant: #DCE5DB;
  --md-sys-color-on-surface-variant: #404942;
  --md-sys-color-outline: #717971;
  --md-sys-color-outline-variant: #C0C9BF;

  /* Botanical specials */
  --leaf-healthy: #40916C;
  --leaf-dry: #D97736;
  --water-drop: #3A86C8;
  --water-bg: #E1F0FA;
  --fertilizer-accent: #E09F3E;

  /* Shapes / Border Radii - True Material 3 Expressive (24-28px for cards, generous pills) */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 6px;
  --md-sys-shape-corner-small: 10px;
  --md-sys-shape-corner-medium: 16px;
  --md-sys-shape-corner-large: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-card: 26px;
  --md-sys-shape-corner-dialog: 32px;
  --md-sys-shape-corner-fab: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Elevation Shadows */
  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.07), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  --md-sys-elevation-2: 0px 3px 8px 2px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.05);
  --md-sys-elevation-3: 0px 6px 16px 3px rgba(0, 0, 0, 0.08), 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  --md-sys-elevation-4: 0px 8px 24px 4px rgba(0, 0, 0, 0.10), 0px 3px 6px 0px rgba(0, 0, 0, 0.06);
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(45, 106, 79, 0.35);

  /* Typography & Transitions */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --transition-speed: 0.25s;
  --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ============================================================================
   PALETTA 1: BOTANICAL GREEN (Alapértelmezett)
   ============================================================================ */
[data-palette="botanical"],
[data-theme="light"],
[data-theme="light"][data-palette="botanical"] {
  --md-sys-color-primary: #2D6A4F;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D8F3DC;
  --md-sys-color-on-primary-container: #082015;
  --md-sys-color-secondary: #B75D35;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FDE8E1;
  --md-sys-color-on-secondary-container: #3E1808;
  --md-sys-color-tertiary: #1B4332;
  --md-sys-color-tertiary-container: #B7E4C7;
  --md-sys-color-on-tertiary-container: #042013;
  --md-sys-color-background: #FAFDF7;
  --md-sys-color-on-background: #181D19;
  --md-sys-color-surface: #F4F9F2;
  --md-sys-color-on-surface: #181D19;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #EEF4EC;
  --md-sys-color-surface-container: #EAF1E7;
  --md-sys-color-surface-container-high: #E3EBE0;
  --md-sys-color-surface-container-highest: #DDE5DA;
  --md-sys-color-surface-variant: #DCE5DB;
  --md-sys-color-on-surface-variant: #404942;
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(45, 106, 79, 0.35);
}

[data-theme="dark"],
[data-theme="dark"][data-palette="botanical"],
[data-theme="dark"]:not([data-palette]) {
  --md-sys-color-primary: #52B788;
  --md-sys-color-on-primary: #082015;
  --md-sys-color-primary-container: #1B4332;
  --md-sys-color-on-primary-container: #D8F3DC;
  --md-sys-color-secondary: #E07A5F;
  --md-sys-color-on-secondary: #3E1808;
  --md-sys-color-secondary-container: #5C2812;
  --md-sys-color-on-secondary-container: #FDE8E1;
  --md-sys-color-tertiary: #95D5B2;
  --md-sys-color-tertiary-container: #2D6A4F;
  --md-sys-color-background: #111713;
  --md-sys-color-on-background: #E1E7DF;
  --md-sys-color-surface: #18221B;
  --md-sys-color-on-surface: #E1E7DF;
  --md-sys-color-surface-container-lowest: #0C120E;
  --md-sys-color-surface-container-low: #141C16;
  --md-sys-color-surface-container: #1E2B22;
  --md-sys-color-surface-container-high: #26332A;
  --md-sys-color-surface-container-highest: #2E3E34;
  --md-sys-color-surface-variant: #3F4F44;
  --md-sys-color-on-surface-variant: #C0CDC2;

  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #4A1215;
  --md-sys-color-on-error-container: #FFDAD6;

  --md-sys-color-warning: #FBBF24;
  --md-sys-color-on-warning: #451A03;
  --md-sys-color-warning-container: #3D2207;
  --md-sys-color-on-warning-container: #FEF3C7;

  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(82, 183, 136, 0.3);
}

/* ============================================================================
   PALETTA 2: TERRACOTTA CLAY (Meleg Terrakotta & Zsálya)
   ============================================================================ */
[data-palette="terracotta"],
[data-theme="light"][data-palette="terracotta"] {
  --md-sys-color-primary: #B75D35;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDBCF;
  --md-sys-color-on-primary-container: #3B0D00;
  --md-sys-color-secondary: #4A705B;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #CCE6D7;
  --md-sys-color-on-secondary-container: #052114;
  --md-sys-color-tertiary: #84532B;
  --md-sys-color-tertiary-container: #FFDCC1;
  --md-sys-color-background: #FDF8F5;
  --md-sys-color-on-background: #221A17;
  --md-sys-color-surface: #F8F1EB;
  --md-sys-color-on-surface: #221A17;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F3ECE5;
  --md-sys-color-surface-container: #EDE4DC;
  --md-sys-color-surface-container-high: #E5DBD2;
  --md-sys-color-surface-container-highest: #DCD2C9;
  --md-sys-color-surface-variant: #E4D8CF;
  --md-sys-color-on-surface-variant: #52443C;
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(183, 93, 53, 0.35);
}

[data-theme="dark"][data-palette="terracotta"] {
  --md-sys-color-primary: #FFB59B;
  --md-sys-color-on-primary: #581C03;
  --md-sys-color-primary-container: #7E2C0C;
  --md-sys-color-on-primary-container: #FFDBCF;
  --md-sys-color-secondary: #B1CDBC;
  --md-sys-color-on-secondary: #1D3728;
  --md-sys-color-secondary-container: #334F40;
  --md-sys-color-on-secondary-container: #CCE6D7;
  --md-sys-color-tertiary: #F1BA91;
  --md-sys-color-tertiary-container: #683B16;
  --md-sys-color-background: #191210;
  --md-sys-color-on-background: #F1DFD8;
  --md-sys-color-surface: #221A17;
  --md-sys-color-on-surface: #F1DFD8;
  --md-sys-color-surface-container-lowest: #140E0C;
  --md-sys-color-surface-container-low: #1C1412;
  --md-sys-color-surface-container: #28201D;
  --md-sys-color-surface-container-high: #312825;
  --md-sys-color-surface-container-highest: #3C332F;
  --md-sys-color-surface-variant: #53433C;
  --md-sys-color-on-surface-variant: #D7C2B8;
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(255, 181, 155, 0.3);
}

/* ============================================================================
   PALETTA 3: FOREST MOSS (Erdei Moha & Borostyán)
   ============================================================================ */
[data-palette="moss"],
[data-theme="light"][data-palette="moss"] {
  --md-sys-color-primary: #386641;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #BAE8C0;
  --md-sys-color-on-primary-container: #00210A;
  --md-sys-color-secondary: #BC4749;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFDAD9;
  --md-sys-color-on-secondary-container: #410007;
  --md-sys-color-tertiary: #6A994E;
  --md-sys-color-tertiary-container: #D1EABC;
  --md-sys-color-background: #FAFBF7;
  --md-sys-color-on-background: #191D19;
  --md-sys-color-surface: #F2F5ED;
  --md-sys-color-on-surface: #191D19;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #ECEFE5;
  --md-sys-color-surface-container: #E4E9DC;
  --md-sys-color-surface-container-high: #DDE2D5;
  --md-sys-color-surface-container-highest: #D5DBCE;
  --md-sys-color-surface-variant: #DEE4D8;
  --md-sys-color-on-surface-variant: #424941;
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(56, 102, 65, 0.35);
}

[data-theme="dark"][data-palette="moss"] {
  --md-sys-color-primary: #9ED0A5;
  --md-sys-color-on-primary: #033716;
  --md-sys-color-primary-container: #1E4E2B;
  --md-sys-color-on-primary-container: #BAE8C0;
  --md-sys-color-secondary: #FFB3B3;
  --md-sys-color-on-secondary: #5F131A;
  --md-sys-color-secondary-container: #83272D;
  --md-sys-color-on-secondary-container: #FFDAD9;
  --md-sys-color-tertiary: #B5D79E;
  --md-sys-color-tertiary-container: #375324;
  --md-sys-color-background: #111512;
  --md-sys-color-on-background: #E1E6DE;
  --md-sys-color-surface: #18201A;
  --md-sys-color-on-surface: #E1E6DE;
  --md-sys-color-surface-container-lowest: #0C100D;
  --md-sys-color-surface-container-low: #131A15;
  --md-sys-color-surface-container: #1F2A22;
  --md-sys-color-surface-container-high: #27352B;
  --md-sys-color-surface-container-highest: #314035;
  --md-sys-color-surface-variant: #404B41;
  --md-sys-color-on-surface-variant: #C1CDBF;
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(158, 208, 165, 0.3);
}

/* ============================================================================
   PALETTA 4: OCEAN SAGE (Óceáni Zsálya & Korall)
   ============================================================================ */
[data-palette="ocean"],
[data-theme="light"][data-palette="ocean"] {
  --md-sys-color-primary: #19647E;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #C0E8F9;
  --md-sys-color-on-primary-container: #001F2A;
  --md-sys-color-secondary: #D96B43;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFDBD0;
  --md-sys-color-on-secondary-container: #3A0B00;
  --md-sys-color-tertiary: #2E656B;
  --md-sys-color-tertiary-container: #B3ECEF;
  --md-sys-color-background: #F6FBFC;
  --md-sys-color-on-background: #171D1F;
  --md-sys-color-surface: #EEF6F8;
  --md-sys-color-on-surface: #171D1F;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #E7F0F3;
  --md-sys-color-surface-container: #DEEAED;
  --md-sys-color-surface-container-high: #D4E2E6;
  --md-sys-color-surface-container-highest: #CAD8DC;
  --md-sys-color-surface-variant: #DAE4E8;
  --md-sys-color-on-surface-variant: #3F484C;
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(25, 100, 126, 0.35);
}

[data-theme="dark"][data-palette="ocean"] {
  --md-sys-color-primary: #8ECEEB;
  --md-sys-color-on-primary: #003444;
  --md-sys-color-primary-container: #004C63;
  --md-sys-color-on-primary-container: #C0E8F9;
  --md-sys-color-secondary: #FFB59E;
  --md-sys-color-on-secondary: #571F08;
  --md-sys-color-secondary-container: #79341B;
  --md-sys-color-on-secondary-container: #FFDBD0;
  --md-sys-color-tertiary: #97CFD4;
  --md-sys-color-tertiary-container: #114D53;
  --md-sys-color-background: #0E1618;
  --md-sys-color-on-background: #DFE8EB;
  --md-sys-color-surface: #142023;
  --md-sys-color-on-surface: #DFE8EB;
  --md-sys-color-surface-container-lowest: #0A1012;
  --md-sys-color-surface-container-low: #10191B;
  --md-sys-color-surface-container: #1A282D;
  --md-sys-color-surface-container-high: #213339;
  --md-sys-color-surface-container-highest: #2B3E45;
  --md-sys-color-surface-variant: #3E4B50;
  --md-sys-color-on-surface-variant: #BECBD0;
  --md-sys-elevation-fab: 0px 10px 26px 0px rgba(142, 206, 235, 0.3);
}

/* ============================================================================
   Világos & Sötét Mód Alapok
   ============================================================================ */
[data-theme="light"] {
  --leaf-healthy: #40916C;
  --leaf-dry: #D97736;
  --water-drop: #3A86C8;
  --water-bg: #E1F0FA;
  --fertilizer-accent: #E09F3E;
}

[data-theme="dark"] {
  --md-sys-color-background: #111713;
  --md-sys-color-on-background: #E1E7DF;
  --md-sys-color-surface: #18221B;
  --md-sys-color-on-surface: #E1E7DF;
  --md-sys-color-surface-container-lowest: #0C120E;
  --md-sys-color-surface-container-low: #141C16;
  --md-sys-color-surface-container: #1F2A22;
  --md-sys-color-surface-container-high: #26332A;
  --md-sys-color-surface-container-highest: #2E3E34;
  --md-sys-color-surface-variant: #3F4F44;
  --md-sys-color-on-surface-variant: #C0CDC2;
  --md-sys-color-outline: #89978D;
  --md-sys-color-outline-variant: #3F4F44;

  --leaf-healthy: #52B788;
  --leaf-dry: #E2875D;
  --water-drop: #64B5F6;
  --water-bg: #1A344D;
  --fertilizer-accent: #F4B942;

  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.35);
  --md-sys-elevation-2: 0px 3px 8px 2px rgba(0, 0, 0, 0.45);
  --md-sys-elevation-3: 0px 6px 16px 3px rgba(0, 0, 0, 0.55);
  --md-sys-elevation-4: 0px 8px 24px 4px rgba(0, 0, 0, 0.65);
}