/* css/theme.css (CORRECTED AND COMPLETE) */

/* --- Base & Theming --- */
:root {
    /* Backgrounds */
    --color-bg-primary: #ffffff; /* e.g., main content area */
    --color-bg-secondary: #f4f4f5; /* e.g., sidebars */
    --color-bg-tertiary: #e5e7eb; /* e.g., hover states, org switcher */
    --color-bg-accent: #4f46e5; /* e.g., indigo-600 */
    --color-bg-accent-hover: #4338ca; /* e.g., indigo-700 */
    --color-bg-success: #16a34a; /* e.g., green-600 */

    /* Text */
    --color-text-primary: #18181b; /* e.g., main text */
    --color-text-secondary: #52525b; /* e.g., placeholder/muted text */
    --color-text-accent: #4f46e5; /* e.g., links */
    --color-text-inverted: #ffffff; /* e.g., text on accent backgrounds */
    
    /* Borders */
    --color-border: #d4d4d8;
    --color-border-accent: #4f46e5;
}

html.dark {
    /* Backgrounds */
    --color-bg-primary: #18181b; /* dark:bg-zinc-900 */
    --color-bg-secondary: #27272a; /* dark:bg-zinc-800 */
    --color-bg-tertiary: #3f3f46; /* dark:bg-zinc-700 */
    --color-bg-accent: #6366f1; /* dark:indigo-500 */
    --color-bg-accent-hover: #4f46e5; /* dark:indigo-600 */
    --color-bg-success: #22c55e; /* dark:green-500 */

    /* Text */
    --color-text-primary: #f4f4f5; /* dark:text-zinc-100 */
    --color-text-secondary: #a1a1aa; /* dark:text-zinc-400 */
    --color-text-accent: #818cf8; /* dark:indigo-400 */
    --color-text-inverted: #ffffff;
    
    /* Borders */
    --color-border: #3f3f46;
    --color-border-accent: #6366f1;
}

/* Base Body Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* This rule ensures that any element with a .dark class within the body
   also gets the dark text color, which helps with component-level toggling if needed. */
body .dark {
    color: var(--color-text-primary);
}