/* ===== DESIGN TOKENS - SHARED ACROSS ADMIN & PARTNER ===== */
/* This is the single source of truth for all design variables */

:root {
    /* ===== BACKGROUNDS ===== */
    --bg-primary: #FAFAF7;          /* Page background */
    --bg-secondary: #ffffff;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;             /* Card/block backgrounds */
    --bg-modal: #ffffff;            /* Modal backgrounds */
    --bg-hover: #f9f8f7;            /* Hover state background */
    --bg-input: #ffffff;            /* Form input backgrounds */
    --bg-sidebar: linear-gradient(180deg, #faf9f7 0%, #f5f4f2 100%);
    --bg-fade: linear-gradient(to bottom, var(--bg-primary) 0%, #ffffff 100%);

    /* ===== BORDERS ===== */
    --border: #e5e4e4;              /* Default border color */
    --border-subtle: #eeeeee;       /* Lighter border */
    --border-strong: #d5d4d4;       /* Darker border for emphasis */

    /* ===== TEXT COLORS ===== */
    --text-primary: #181514;        /* Main text - almost black */
    --text-secondary: #555555;      /* Secondary text */
    --text-muted: #888888;          /* Muted/placeholder text */
    --text-placeholder: #aaaaaa;    /* Input placeholders */

    /* ===== ACCENT - TERRA-COTTA ===== */
    --accent: #D17359;              /* Primary action color */
    --accent-hover: #c06548;        /* Darker for hover states */
    --accent-glow: rgba(209, 115, 89, 0.15);  /* Subtle glow effect */
    --accent-text: #ffffff;         /* Text on accent backgrounds */

    /* ===== BUTTONS ===== */
    --btn-white-bg: #ffffff;        /* Secondary button background */

    /* ===== STATUS COLORS ===== */
    --success: #0dac38;             /* Green for active/success */
    --success-bg: rgba(13, 172, 56, 0.1);
    --error: #dc2626;               /* Red for errors/danger */
    --error-bg: rgba(220, 38, 38, 0.1);
    --warning: #b45309;             /* Amber for warnings */
    --warning-bg: #fef3c7;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 6px;               /* Small tags/badges */
    --radius-md: 10px;              /* Buttons/inputs */
    --radius-lg: 16px;              /* Cards/modals */

    /* ===== LAYOUT ===== */
    --sidebar-width: 270px;

    /* ===== TRANSITIONS ===== */
    --transition: 0.2s ease;

    /* ===== RAINBOW GRADIENT ===== */
    --rainbow-gradient: linear-gradient(90deg,
        #ff006e 0%,
        #ff8500 14%,
        #ffbe0b 28%,
        #06d6a0 42%,
        #00b4d8 56%,
        #7209b7 70%,
        #ff006e 84%,
        #ff8500 100%);
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-primary: #0d0d0d;
    --bg-secondary: #151515;
    --bg-elevated: #1a1a1a;
    --bg-card: #1a1a1a;
    --bg-modal: #1a1a1a;
    --bg-hover: #252525;
    --bg-input: #1e1e1e;
    --bg-sidebar: linear-gradient(180deg, #0d0d0d 0%, #121212 100%);
    --bg-fade: linear-gradient(to bottom, #252525 0%, #1a1a1a 100%);

    /* Borders */
    --border: #2a2a2a;
    --border-subtle: #222222;
    --border-strong: #333333;

    /* Text */
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --text-placeholder: #555555;

    /* Status colors adjusted for dark */
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.15);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);

    /* Shadows - stronger for dark mode */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* White button becomes dark in dark mode */
    --btn-white-bg: var(--bg-card);
}

/* ===== ANIMATIONS ===== */
@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}