/* ================================================
   GreenVista Design System
   ================================================ */

/* =====================================
   DESIGN TOKENS
   ===================================== */
:root {
    /* Color Tokens */
    --primary-color: #9ddf65;
    --primary-hover-color: #8bc950;
    --primary-active-color: #7ab03f;
    /* Button Accent Tokens */
    --button-accent-color: #9ddf65; /* Green */
    --button-accent-hover-color: #8bc950; /* Darker green for hover */
    --button-accent-active-color: #7ab03f; /* Even darker for active state */
    --button-accent-text-color: #000000; /* Black text for better contrast */
    /* Header Tokens */
    --header-background-color: #7ab03f; /* Darker green header background */
    --header-text-color: #ffffff; /* White text for better contrast on darker background */
    /* Semantic Color Tokens */
    --success-color: #26b050;
    --error-color: #e50000;
    --info-color: #006bb7;
    --warning-color: #ff8f00;
    /* Neutral Color Tokens */
    --neutral-light: #f9f9f9;
    --neutral-medium: #6c757d;
    --neutral-dark: #929292;
    /* Spacing Tokens */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-lg: 20px;
    --spacing-xl: 40px;
    /* Typography Tokens */
    --font-family-primary: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    /* Border Tokens */
    --border-width-thin: 1px;
    --border-radius-sm: 4px;
    --border-color-light: #ccc;
    /* Layout Tokens */
    --fixed-width-label: 300px;
}

/* =====================================
   COMPONENT OVERRIDES
   ===================================== */

/* Global override for Fluent theme colors */
html,
body,
:root {
    --accent-fill-rest: var(--header-background-color) !important;
    --accent-fill-hover: var(--primary-hover-color) !important;
    --accent-fill-active: var(--primary-active-color) !important;
}

/* Header Override - More specific selectors */
fluent-header,
.fluent-header,
fluent-header *,
.fluent-header * {
    --accent-fill-rest: var(--header-background-color) !important;
    --accent-foreground-rest: var(--header-text-color) !important;
    background-color: var(--header-background-color) !important;
    color: var(--header-text-color) !important;
}

/* Button Accent Colors Override - All States with Black Text */
fluent-button[appearance="accent"],
.fluent-button[appearance="accent"] {
    --accent-fill-rest: var(--button-accent-color) !important;
    --accent-fill-hover: var(--button-accent-hover-color) !important;
    --accent-fill-active: var(--button-accent-active-color) !important;
    --accent-foreground-rest: var(--button-accent-text-color) !important;
    --accent-foreground-hover: var(--button-accent-text-color) !important;
    --accent-foreground-active: var(--button-accent-text-color) !important;
    --accent-foreground-disabled: var(--button-accent-text-color) !important;
    color: var(--button-accent-text-color) !important;
}

/* Comprehensive accent button text override for all states including disabled */
fluent-button[appearance="accent"]:enabled,
fluent-button[appearance="accent"]:disabled,
fluent-button[appearance="accent"][disabled],
fluent-button[appearance="accent"]:hover,
fluent-button[appearance="accent"]:active,
fluent-button[appearance="accent"]:focus,
.fluent-button[appearance="accent"]:enabled,
.fluent-button[appearance="accent"]:disabled,
.fluent-button[appearance="accent"][disabled],
.fluent-button[appearance="accent"]:hover,
.fluent-button[appearance="accent"]:active,
.fluent-button[appearance="accent"]:focus {
    color: #000000 !important;
}

/* Target FluentUI shadow DOM elements for accent buttons */
fluent-button[appearance="accent"] .control,
fluent-button[appearance="accent"]::part(control),
fluent-button[appearance="accent"] span {
    color: #000000 !important;
}

/* Future component overrides can go here */