/*
 * Doggy Dashboard - Design Tokens & CSS Variables
 * ================================================
 * SINGLE SOURCE OF TRUTH for all colors, spacing, typography, and UI tokens.
 * This file MUST be loaded before all other stylesheets.
 *
 * All other CSS files should reference these variables instead of defining their own.
 * Dark mode overrides are also centralized here.
 */

/* ===== LIGHT THEME (DEFAULT) ===== */
:root {
    /* --- Primary Brand Colors --- */
    --primary-color: #4361ee;
    --primary-color-rgb: 67, 97, 238;
    --primary-dark: #3a56d4;

    /* --- Secondary & Accent Colors --- */
    --secondary-color: #f72585;
    --secondary-color-rgb: 247, 37, 133;
    --accent-color: #7209b7;
    --accent-color-rgb: 114, 9, 183;
    --accent-color-dark: #5a079a;

    /* --- Functional / Semantic Colors --- */
    --success-color: #06d6a0;
    --success-color-rgb: 6, 214, 160;
    --success-color-dark: #04b386;
    --warning-color: #ffd166;
    --warning-color-rgb: 255, 209, 102;
    --error-color: #ef476f;
    --error-color-rgb: 239, 71, 111;
    --error-color-dark: #d63a5f;
    --info-color: #4cc9f0;
    --info-color-rgb: 76, 201, 240;

    /* --- Neutral / Text Colors --- */
    --text-color: #333333;
    --text-color-muted: #6c757d;
    --text-light: #8d99ae;
    --text-light-rgb: 141, 153, 174;

    /* --- Background Colors --- */
    --bg-color: #f8f9fa;
    --bg-light: #ffffff;
    --bg-dark: #e9ecef;

    /* --- Border & Surface --- */
    --border-color: #e0e0e0;
    --border-radius: 12px;
    --card-border-radius: 16px;
    --button-border-radius: 12px;

    /* --- Shadows --- */
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
    --box-shadow-hover: 0 15px 25px rgba(0, 0, 0, 0.08), 0 5px 10px rgba(0, 0, 0, 0.04);

    /* --- Transitions (specific properties, NOT 'all') --- */
    --transition-fast: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    --transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;

    /* --- Misc --- */
    --hover-opacity: 0.05;
    --disabled-bg: #cccccc;

    /* --- Button Tokens --- */
    --button-padding-small: 0.5rem 0.75rem;
    --button-padding-medium: 0.75rem 1rem;
    --button-padding-large: 0.9rem 1.25rem;
    --button-font-size-small: 0.85rem;
    --button-font-size-medium: 0.95rem;
    --button-font-size-large: 1.1rem;
    --button-font-weight: 500;
    --button-font-weight-bold: 600;
    --button-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    --button-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    --button-box-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.15);
    --button-hover-transform: translateY(-2px);
    --button-active-transform: translateY(0);

    /* --- Form Tokens --- */
    --input-font-size: 16px;
    --subtitle-font-size: 0.9rem;

    /* --- Mobile Tokens --- */
    --mobile-touch-target: 44px;
    --mobile-border-radius: 14px;
}

/* ===== LIGHT THEME (EXPLICIT) ===== */
/* Explicitly set light theme colors to override prefers-color-scheme */
[data-theme="light"] {
    /* --- Primary Brand Colors --- */
    --primary-color: #4361ee;
    --primary-color-rgb: 67, 97, 238;
    --primary-dark: #3a56d4;

    /* --- Secondary & Accent Colors --- */
    --secondary-color: #f72585;
    --secondary-color-rgb: 247, 37, 133;
    --accent-color: #7209b7;
    --accent-color-rgb: 114, 9, 183;
    --accent-color-dark: #5a079a;

    /* --- Functional / Semantic Colors --- */
    --success-color: #06d6a0;
    --success-color-rgb: 6, 214, 160;
    --success-color-dark: #04b386;
    --warning-color: #ffd166;
    --warning-color-rgb: 255, 209, 102;
    --error-color: #ef476f;
    --error-color-rgb: 239, 71, 111;
    --error-color-dark: #d63a5f;
    --info-color: #4cc9f0;
    --info-color-rgb: 76, 201, 240;

    /* --- Neutral / Text Colors --- */
    --text-color: #333333;
    --text-color-muted: #6c757d;
    --text-light: #8d99ae;
    --text-light-rgb: 141, 153, 174;

    /* --- Background Colors --- */
    --bg-color: #f8f9fa;
    --bg-light: #ffffff;
    --bg-dark: #e9ecef;

    /* --- Border & Surface --- */
    --border-color: #e0e0e0;

    /* --- Shadows --- */
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.03);
    --box-shadow-hover: 0 15px 25px rgba(0, 0, 0, 0.08), 0 5px 10px rgba(0, 0, 0, 0.04);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --primary-color: #4cc9f0;
    --primary-color-rgb: 76, 201, 240;
    --primary-dark: #3db8df;

    --secondary-color: #f72585;
    --secondary-color-rgb: 247, 37, 133;

    --accent-color: #b5179e;
    --accent-color-rgb: 181, 23, 158;
    --accent-color-dark: #8f1380;

    --success-color: #2ec4b6;
    --success-color-rgb: 46, 196, 182;
    --warning-color: #ffd166;
    --warning-color-rgb: 255, 209, 102;
    --error-color: #ff5a7e;
    --error-color-rgb: 255, 90, 126;
    --info-color: #4cc9f0;
    --info-color-rgb: 76, 201, 240;

    --text-color: #e9ecef;
    --text-color-muted: #9ca3af;
    --text-light: #adb5bd;
    --text-light-rgb: 173, 181, 189;

    --bg-color: #121212;
    --bg-light: #1e1e1e;
    --bg-dark: #2d2d2d;

    --border-color: #444444;

    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
    --box-shadow-hover: 0 15px 25px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* ===== PREFERS-COLOR-SCHEME SUPPORT ===== */
/* Automatically apply dark theme if user's OS preference is dark and no explicit theme is set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --primary-color: #4cc9f0;
        --primary-color-rgb: 76, 201, 240;
        --primary-dark: #3db8df;
        --secondary-color: #f72585;
        --secondary-color-rgb: 247, 37, 133;
        --accent-color: #b5179e;
        --accent-color-rgb: 181, 23, 158;
        --accent-color-dark: #8f1380;
        --success-color: #2ec4b6;
        --success-color-rgb: 46, 196, 182;
        --warning-color: #ffd166;
        --warning-color-rgb: 255, 209, 102;
        --error-color: #ff5a7e;
        --error-color-rgb: 255, 90, 126;
        --info-color: #4cc9f0;
        --info-color-rgb: 76, 201, 240;
        --text-color: #e9ecef;
        --text-color-muted: #9ca3af;
        --text-light: #adb5bd;
        --text-light-rgb: 173, 181, 189;
        --bg-color: #121212;
        --bg-light: #1e1e1e;
        --bg-dark: #2d2d2d;
        --border-color: #444444;
        --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        --box-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
        --box-shadow-hover: 0 15px 25px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.2);
    }
}