/* ============================================================
   Cookbook PWA – Theme Definitions
   5 themes via CSS custom properties on [data-theme]
   ============================================================ */

/* ── 1. Fresh & Clean (default) ─────────────────────────────
   Sage green + warm white. Matches the kitchen.              */
:root,
[data-theme="fresh-clean"] {
  --color-primary:        #6B8F71;
  --color-primary-light:  #8FAF95;
  --color-primary-dark:   #4A6B50;
  --color-primary-rgb:    107, 143, 113;

  --color-accent:         #F7F7F2;
  --color-accent-dark:    #EAEDE8;

  --color-base:           #FFFFFF;
  --color-surface:        #F9FAF8;
  --color-card:           #FFFFFF;
  --color-border:         #DDE8DF;

  --color-text:           #2C3E35;
  --color-text-secondary: #627A6A;
  --color-text-light:     #9DB0A2;
  --color-text-on-primary:#FFFFFF;

  --color-nav-bg:         #FFFFFF;
  --color-header-bg:      #FFFFFF;
  --color-header-border:  #DDE8DF;

  --color-fav:            #E07070;
  --color-tag-bg:         #E4EEE6;
  --color-tag-text:       #3D6644;

  --color-cook-bg:        #1E2A22;
  --color-cook-text:      #F0F5F1;
  --color-cook-accent:    #8FAF95;

  --color-chat-user-bg:   #6B8F71;
  --color-chat-user-text: #FFFFFF;
  --color-chat-ai-bg:     #EEF3EF;
  --color-chat-ai-text:   #2C3E35;

  --shadow-card: 0 2px 12px rgba(107,143,113,0.10);
  --shadow-nav:  0 -1px 12px rgba(107,143,113,0.08);
}

/* ── 2. Warm Kitchen ────────────────────────────────────────
   Terracotta + cream. Cozy, classic cookbook feel.          */
[data-theme="warm-kitchen"] {
  --color-primary:        #C4622D;
  --color-primary-light:  #D4835A;
  --color-primary-dark:   #9A4A1E;
  --color-primary-rgb:    196, 98, 45;

  --color-accent:         #FDF6EC;
  --color-accent-dark:    #F5E8D2;

  --color-base:           #FFFDF9;
  --color-surface:        #FEF8F2;
  --color-card:           #FFFFFF;
  --color-border:         #EDD8C0;

  --color-text:           #3D2010;
  --color-text-secondary: #8B5E3C;
  --color-text-light:     #B8906E;
  --color-text-on-primary:#FFFFFF;

  --color-nav-bg:         #FFFDF9;
  --color-header-bg:      #FFFDF9;
  --color-header-border:  #EDD8C0;

  --color-fav:            #E04040;
  --color-tag-bg:         #FDECD8;
  --color-tag-text:       #8B3A10;

  --color-cook-bg:        #2A1608;
  --color-cook-text:      #FDF0E4;
  --color-cook-accent:    #D4835A;

  --color-chat-user-bg:   #C4622D;
  --color-chat-user-text: #FFFFFF;
  --color-chat-ai-bg:     #FEF0E2;
  --color-chat-ai-text:   #3D2010;

  --shadow-card: 0 2px 12px rgba(196,98,45,0.10);
  --shadow-nav:  0 -1px 12px rgba(196,98,45,0.08);
}

/* ── 3. Bold Family ─────────────────────────────────────────
   Deep navy + warm yellow. High contrast, fun energy.       */
[data-theme="bold-family"] {
  --color-primary:        #1B2A4A;
  --color-primary-light:  #2D4170;
  --color-primary-dark:   #0F1929;
  --color-primary-rgb:    27, 42, 74;

  --color-accent:         #F5A623;
  --color-accent-dark:    #D48E0F;

  --color-base:           #F8F9FB;
  --color-surface:        #EFF1F5;
  --color-card:           #FFFFFF;
  --color-border:         #C8D0E0;

  --color-text:           #1B2A4A;
  --color-text-secondary: #4A5878;
  --color-text-light:     #7888A8;
  --color-text-on-primary:#FFFFFF;

  --color-nav-bg:         #1B2A4A;
  --color-header-bg:      #1B2A4A;
  --color-header-border:  #2D4170;

  --color-fav:            #FF6B6B;
  --color-tag-bg:         #FFF0CC;
  --color-tag-text:       #7A4800;

  --color-cook-bg:        #0D1520;
  --color-cook-text:      #F0F4FF;
  --color-cook-accent:    #F5A623;

  --color-chat-user-bg:   #F5A623;
  --color-chat-user-text: #1B2A4A;
  --color-chat-ai-bg:     #EFF1F5;
  --color-chat-ai-text:   #1B2A4A;

  --shadow-card: 0 2px 12px rgba(27,42,74,0.12);
  --shadow-nav:  0 -1px 0 rgba(255,255,255,0.08);
}

/* ── 4. Dark Cook ───────────────────────────────────────────
   Charcoal + orange. Easy on eyes in a bright kitchen.      */
[data-theme="dark-cook"] {
  --color-primary:        #FF6B35;
  --color-primary-light:  #FF8C60;
  --color-primary-dark:   #E05020;
  --color-primary-rgb:    255, 107, 53;

  --color-accent:         #2C2C2E;
  --color-accent-dark:    #1C1C1E;

  --color-base:           #1C1C1E;
  --color-surface:        #2C2C2E;
  --color-card:           #3A3A3C;
  --color-border:         #48484A;

  --color-text:           #F2F2F7;
  --color-text-secondary: #AEAEB2;
  --color-text-light:     #636366;
  --color-text-on-primary:#FFFFFF;

  --color-nav-bg:         #1C1C1E;
  --color-header-bg:      #1C1C1E;
  --color-header-border:  #3A3A3C;

  --color-fav:            #FF453A;
  --color-tag-bg:         #3A2E28;
  --color-tag-text:       #FF8C60;

  --color-cook-bg:        #000000;
  --color-cook-text:      #F2F2F7;
  --color-cook-accent:    #FF6B35;

  --color-chat-user-bg:   #FF6B35;
  --color-chat-user-text: #FFFFFF;
  --color-chat-ai-bg:     #3A3A3C;
  --color-chat-ai-text:   #F2F2F7;

  --shadow-card: 0 2px 16px rgba(0,0,0,0.40);
  --shadow-nav:  0 -1px 0 rgba(255,255,255,0.06);
}

/* ── 5. Lavender ────────────────────────────────────────────
   Purple + soft lilac. A little something for the wife 💜   */
[data-theme="lavender"] {
  --color-primary:        #7C6FAF;
  --color-primary-light:  #9D91C8;
  --color-primary-dark:   #5C5090;
  --color-primary-rgb:    124, 111, 175;

  --color-accent:         #EDE9F6;
  --color-accent-dark:    #DDD5F0;

  --color-base:           #FDFCFF;
  --color-surface:        #F5F2FB;
  --color-card:           #FFFFFF;
  --color-border:         #DDD5F0;

  --color-text:           #2D2640;
  --color-text-secondary: #6B5F88;
  --color-text-light:     #9B90B8;
  --color-text-on-primary:#FFFFFF;

  --color-nav-bg:         #FFFFFF;
  --color-header-bg:      #FFFFFF;
  --color-header-border:  #DDD5F0;

  --color-fav:            #E870A0;
  --color-tag-bg:         #EDE9F6;
  --color-tag-text:       #5C5090;

  --color-cook-bg:        #1A1628;
  --color-cook-text:      #F0EEF8;
  --color-cook-accent:    #9D91C8;

  --color-chat-user-bg:   #7C6FAF;
  --color-chat-user-text: #FFFFFF;
  --color-chat-ai-bg:     #EDE9F6;
  --color-chat-ai-text:   #2D2640;

  --shadow-card: 0 2px 12px rgba(124,111,175,0.12);
  --shadow-nav:  0 -1px 12px rgba(124,111,175,0.08);
}