/* =========================================
   1. GLOBAL ASSETS
   ========================================= */
/* Primary Headings: Outfit (Geometric, Modern) */
/* Body & Data: Inter (Legible, Tabular Numbers) */

/* Inter Variable Font */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2'),
         url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2'),
         url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
}

/* Outfit Variable Font - Download from https://fonts.google.com/specimen/Outfit */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Outfit-VariableFont_wght.woff2') format('woff2'),
         url('../fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
    /* =========================================
       2. PRIMITIVE COLOR SCALES (The Raw Palette)
       ========================================= */
    /* --- CONFIGURATION --- */
    /* The requested Primary Green */
    --hue-primary: 148.42;
    /* Complementary Slate/Gray (Cool Neutral) */
    --hue-gray: 265;
    /* Accent: A warm Gold/Orange to contrast the Green */
    --hue-accent: 55;
    /* --- PRIMARY SCALE (Green) --- */
    /* Based on your requested center point: oklch(0.67 0.17 148.42) */
    --primary-50: oklch(97% 0.05 var(--hue-primary));
    --primary-100: oklch(92% 0.08 var(--hue-primary));
    --primary-200: oklch(85% 0.12 var(--hue-primary));
    --primary-300: oklch(78% 0.15 var(--hue-primary));
    --primary-400: oklch(72% 0.16 var(--hue-primary));
    --primary-500: oklch(67% 0.17 var(--hue-primary)); /* <--- YOUR BASE COLOR */
    --primary-600: oklch(58% 0.17 var(--hue-primary));
    --primary-700: oklch(48% 0.15 var(--hue-primary));
    --primary-800: oklch(38% 0.12 var(--hue-primary));
    --primary-900: oklch(25% 0.10 var(--hue-primary));
    --primary-950: oklch(15% 0.08 var(--hue-primary));
    /* --- GRAYSCALE (Cool Slate) --- */
    /* Essential for professional "SaaS" look */
    --gray-50: oklch(98% 0.01 var(--hue-gray));
    --gray-100: oklch(96% 0.01 var(--hue-gray));
    --gray-200: oklch(90% 0.02 var(--hue-gray));
    --gray-300: oklch(80% 0.03 var(--hue-gray));
    --gray-400: oklch(70% 0.04 var(--hue-gray));
    --gray-500: oklch(55% 0.05 var(--hue-gray));
    --gray-600: oklch(45% 0.05 var(--hue-gray));
    --gray-700: oklch(35% 0.04 var(--hue-gray));
    --gray-800: oklch(20% 0.04 var(--hue-gray));
    --gray-900: oklch(15% 0.03 var(--hue-gray));
    --gray-950: oklch(10% 0.03 var(--hue-gray));
    /* --- ACCENT SCALE (Gold) --- */
    --accent-500: oklch(70% 0.16 var(--hue-accent));
    --accent-600: oklch(60% 0.16 var(--hue-accent));
    /* --- SEMANTIC COLORS --- */
    --color-success: oklch(65% 0.18 145); /* Similar to primary but distinct */
    --color-success-faded: oklch(98% 0.01 145); /* Extremely faded background tint */

    --color-warning: oklch(75% 0.16 85);
    --color-error: oklch(60% 0.20 25);
    --color-error-faded: oklch(98% 0.01 0.3); /* Extremely faded background tint */
    --color-info: oklch(65% 0.15 240);
    --primary-text-accent: white;
    /* =========================================
       3. TYPOGRAPHY SCALE
       ========================================= */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    /* Font Sizes (Major Third Scale) */
    --text-xxs: 0.5rem; /* 8px - Pills */
    --text-xs: 0.75rem; /* 12px - Labels */
    --text-sm: 0.875rem; /* 14px - UI Text */
    --text-base: 1rem; /* 16px - Body */
    --text-lg: 1.125rem; /* 18px - Subtitles */
    --text-xl: 1.25rem; /* 20px - Card Headers */
    --text-2xl: 1.5rem; /* 24px - Page Titles */
    --text-3xl: 1.875rem; /* 30px - Modal Titles */
    --text-4xl: 2.25rem; /* 36px - Marketing */
    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    /* Font Weights */
    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    /* =========================================
       4. SPACING & LAYOUT SCALES
       ========================================= */
    /* Based on 4px grid (0.25rem) */
    --space-0-5: 0.125rem; /* 2px */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    /* =========================================
       5. COMPONENT PROPERTIES
       ========================================= */
    /* Border Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px; /* Standard Card/Input */
    --radius-lg: 12px; /* Modals */
    --radius-xl: 16px;
    --radius-full: 9999px; /* Pills/Avatars */
    /* Box Shadows (Colored shadows using OKLCH Alpha) */
    /* We use the primary hue for shadows to create a rich feel */
    --shadow-tint: var(--hue-primary);
    --shadow-xs: 0 1px 2px 0 oklch(10% 0.1 var(--shadow-tint) / 0.05);
    --shadow-sm: 0 1px 3px 0 oklch(10% 0.1 var(--shadow-tint) / 0.1), 0 1px 2px -1px oklch(10% 0.1 var(--shadow-tint) / 0.1);
    --shadow-md: 0 4px 6px -1px oklch(10% 0.1 var(--shadow-tint) / 0.1), 0 2px 4px -2px oklch(10% 0.1 var(--shadow-tint) / 0.1);
    --shadow-lg: 0 10px 15px -3px oklch(10% 0.1 var(--shadow-tint) / 0.1), 0 4px 6px -4px oklch(10% 0.1 var(--shadow-tint) / 0.1);
    --shadow-xl: 0 20px 25px -5px oklch(10% 0.1 var(--shadow-tint) / 0.1), 0 8px 10px -6px oklch(10% 0.1 var(--shadow-tint) / 0.1);
    --shadow-xl: 5px 20px 25px 5px oklch(10% 0.1 var(--shadow-tint) / 0.1), 5px 8px 10px 6px oklch(10% 0.1 var(--shadow-tint) / 0.1);
    /* Transitions */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal: 1050;
    --z-popover: 1080;
    --z-toast: 1100;
}

/* =========================================
   6. SEMANTIC MAPPING (THEMES)
   ========================================= */

/* --- LIGHT THEME (Default) --- */
:root {
    /* Backgrounds */
    --bg-app: var(--gray-50);
    --bg-surface: #ffffff;
    --bg-surface-alt: var(--gray-50);
    --bg-input: #ffffff;
    /* Text */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-400);
    --text-inverse: #ffffff;
    /* Borders */
    --border-subtle: var(--gray-200);
    --border-medium: var(--gray-300);
    --border-strong: var(--gray-400);
    /* Primary Actions */
    /* Using 600 for text readability on white, 500 for buttons */
    --brand-solid: var(--primary-500);
    --brand-hover: var(--primary-600);
    --brand-text: var(--primary-700);
    --brand-surface: var(--primary-50); /* Light green tint for active items */
    /* Data Visualization */
    --table-header: var(--gray-50);
    --table-stripe: var(--gray-50);
    --table-hover: var(--gray-100);
}

/* --- DARK THEME --- */
@media (prefers-color-scheme: dark) {
    :root {
        /* Backgrounds (Using Gray 800-950) */
        --bg-app: var(--gray-950);
        --bg-surface: var(--gray-900);
        --bg-surface-alt: var(--gray-800);
        --bg-input: var(--gray-950);
        /* Text (Inverted) */
        --text-primary: var(--gray-50);
        --text-secondary: var(--gray-300);
        --text-tertiary: var(--gray-500);
        --text-inverse: var(--gray-950);
        /* Borders */
        --border-subtle: var(--gray-800);
        --border-medium: var(--gray-700);
        --border-strong: var(--gray-600);
        /* Primary Actions */
        /* Adjusted for contrast on dark backgrounds */
        --brand-solid: var(--primary-500);
        --brand-hover: var(--primary-400);
        --brand-text: var(--primary-300);
        --brand-surface: oklch(20% 0.1 var(--hue-primary)); /* Dark green tint */
        /* Data Visualization */
        --table-header: var(--gray-900);
        --table-stripe: var(--gray-800);
        --table-hover: var(--gray-700);
        /* Shadow adjustment for dark mode (Just pure black alpha) */
        --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.5);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5);
        --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.6);
    }
}


/*Global Animations*/

@keyframes slide-in {
    from {
        width: 500px;
    }

    to {
        width: 0;
    }
}

@keyframes slide-out {
    from {
        width: 0;
    }

    to {
        width: 500px;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation for toast leaving */
@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}



/* 1. Give the button a unique name to "anchor" to */
.trigger-btn {
    anchor-name: --menu-anchor;
}

/* 2. Tell the popover to follow that anchor */
[popover] {
    /* This replaces position: absolute logic */
    position-anchor: --menu-anchor;
    top: anchor(bottom);
    /* Align the right edge of the menu to the right edge of the button */
    right: anchor(right);
    left: auto; /* Ensure default centering/left alignment is disabled */
    /*    left: anchor(left);*/
    /* Reset default popover style1 */
    margin: 5px 0 0 0;
    padding-inline: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    /* Sizing Logic */
    min-width: anchor-size(width); /* Matches button width at minimum */
    width: max-content; /* Grows to fit long text if needed */
    max-width: 300px; /* Optional: Prevents it from getting absurdly wide */

    & button {
        margin-inline: 0;
        margin-block: 0;
        width: 100%;
        
    }
}

    /* 3. Style the backdrop (optional) */
    [popover]::backdrop {
        background-color: rgba(0, 0, 0, 0.05);
    }


/* Style the button ONLY when its associated popover is open */
.trigger-btn:has(+ [popover]:popover-open) {
    background-color: #e0e0e0;
    border-color: #007bff;
}

    /* Add a little 'caret' rotation if you have one */
    .trigger-btn:has(+ [popover]:popover-open)::after {
        transform: rotate(180deg);
    }

/* Style the popover specifically when it enters the 'top layer' */
[popover]:popover-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    animation: fade-in 0.2s ease-out;
}

/* Smooth entry animation */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}