/* ===========================
   ChefMike Design Tokens v1.0
   Single Source of Truth
   Concept-based color system
   =========================== */

/* ===========================
   CONCEPT COLOR TOKENS - Light Mode
   =========================== */
:root {
    /* MealType - Warm Orange */
    --color-mealtype-bg: #FFF4ED;
    --color-mealtype-text: #C2410C;
    --color-mealtype-hover: #FFEDD5;

    /* Cuisine - Cool Blue */
    --color-cuisine-bg: #EFF6FF;
    --color-cuisine-text: #1E40AF;
    --color-cuisine-hover: #DBEAFE;

    /* Complexity - Purple */
    --color-complexity-bg: #F5F3FF;
    --color-complexity-text: #6B21A8;
    --color-complexity-hover: #EDE9FE;

    /* Diet - Green */
    --color-diet-bg: #F0FDF4;
    --color-diet-text: #15803D;
    --color-diet-hover: #DCFCE7;

    /* Ingredient - Teal */
    --color-ingredient-bg: #F0FDFA;
    --color-ingredient-text: #0F766E;
    --color-ingredient-hover: #CCFBF1;

    /* Servings - Slate */
    --color-servings-bg: #F8FAFC;
    --color-servings-text: #475569;
    --color-servings-hover: #F1F5F9;

    /* Occasion - Yellow/Amber */
    --color-occasion-bg: #FEFCE8;
    --color-occasion-text: #A16207;
    --color-occasion-hover: #FEF9C3;

    /* CookingLevel - Red */
    --color-cookinglevel-bg: #FEF3F2;
    --color-cookinglevel-text: #B91C1C;
    --color-cookinglevel-hover: #FEE2E2;

    /* User - Brand Orange */
    --color-user-bg: rgba(232, 93, 51, 0.15);
    --color-user-text: #E85D33;
    --color-user-hover: rgba(232, 93, 51, 0.25);
    --color-user-border: rgba(232, 93, 51, 0.3);

    /* Generic - Neutral */
    --color-generic-bg: rgba(0, 0, 0, 0.04);
    --color-generic-text: #6B7280;
    --color-generic-hover: rgba(0, 0, 0, 0.08);
}

/* ===========================
   CONCEPT COLOR TOKENS - Dark Mode
   =========================== */
[data-theme="dark"] {
    /* MealType */
    --color-mealtype-bg: rgba(194, 65, 12, 0.15);
    --color-mealtype-text: #FB923C;
    --color-mealtype-hover: rgba(194, 65, 12, 0.25);

    /* Cuisine */
    --color-cuisine-bg: rgba(30, 64, 175, 0.15);
    --color-cuisine-text: #60A5FA;
    --color-cuisine-hover: rgba(30, 64, 175, 0.25);

    /* Complexity */
    --color-complexity-bg: rgba(107, 33, 168, 0.15);
    --color-complexity-text: #C084FC;
    --color-complexity-hover: rgba(107, 33, 168, 0.25);

    /* Diet */
    --color-diet-bg: rgba(21, 128, 61, 0.15);
    --color-diet-text: #4ADE80;
    --color-diet-hover: rgba(21, 128, 61, 0.25);

    /* Ingredient */
    --color-ingredient-bg: rgba(15, 118, 110, 0.15);
    --color-ingredient-text: #2DD4BF;
    --color-ingredient-hover: rgba(15, 118, 110, 0.25);

    /* Servings */
    --color-servings-bg: rgba(71, 85, 105, 0.15);
    --color-servings-text: #94A3B8;
    --color-servings-hover: rgba(71, 85, 105, 0.25);

    /* Occasion */
    --color-occasion-bg: rgba(161, 98, 7, 0.15);
    --color-occasion-text: #FCD34D;
    --color-occasion-hover: rgba(161, 98, 7, 0.25);

    /* CookingLevel */
    --color-cookinglevel-bg: rgba(185, 28, 28, 0.15);
    --color-cookinglevel-text: #FCA5A5;
    --color-cookinglevel-hover: rgba(185, 28, 28, 0.25);

    /* User */
    --color-user-bg: rgba(232, 93, 51, 0.2);
    --color-user-text: #FF7B52;
    --color-user-hover: rgba(232, 93, 51, 0.3);
    --color-user-border: rgba(232, 93, 51, 0.4);

    /* Generic */
    --color-generic-bg: rgba(255, 255, 255, 0.06);
    --color-generic-text: #9CA3AF;
    --color-generic-hover: rgba(255, 255, 255, 0.1);
}