/**
 * OK Tyr Custom Control Panel Theme
 *
 * Brand Colors:
 * - Primary: #016449 (brand-green-primary)
 * - Dark: #014a37 (brand-green-dark)
 * - Light: #cfe7cb (brand-green-light)
 * - Accent: #9C2B32 (brand-red-primary)
 * - Red Light: #b8434a (brand-red-light)
 * - Red Dark: #7a2228 (brand-red-dark)
 */

:root {
    /* Primary brand color - used for buttons, links, and accent elements */
    --theme-color-primary: #016449;
    --theme-color-success: #016449;

    /* UI accent colors - used for selected states and highlights */
    --theme-color-ui-accent-bg: #016449;
    --theme-color-ui-accent-text: #ffffff;

    /* Progress bar and focus states */
    --theme-color-progress-bar: #016449;
    --theme-color-focus-outline: #016449;

    /* Switch/toggle background when active */
    --theme-color-switch-bg: #016449;

    /* Derived primary colors for buttons and interactive elements */
    --color-primary: #016449;
    --color-primary-border: #014a37;
    --color-primary-hover: #014a37;
    --color-primary-gap: #013d2e;

    /* Success color matches brand green */
    --color-success: #016449;
}

/* Dark mode overrides */
.dark {
    --theme-color-primary: #1a8f6e;
    --theme-color-success: #1a8f6e;
    --theme-color-ui-accent-bg: #1a8f6e;
    --theme-color-ui-accent-text: #ffffff;
    --theme-color-progress-bar: #1a8f6e;
    --theme-color-focus-outline: #1a8f6e;
    --theme-color-switch-bg: #1a8f6e;

    --color-primary: #1a8f6e;
    --color-primary-border: #016449;
    --color-primary-hover: #25a880;
    --color-primary-gap: #016449;
    --color-success: #1a8f6e;
}

/* Login page customization */
#statamic[data-page*="login"] {
    --theme-color-primary: #016449;
}

/* Custom logo styling */
[data-ui-header] img,
.global-header img[src*="tyrlogo"] {
    max-height: 40px;
    width: auto;
}

/* Sidebar navigation - active state with brand color */
[data-nav-main] a[aria-current="page"],
[data-nav-main] button[aria-current="page"],
.nav-main a.active,
.nav-main button.active {
    background-color: color-mix(in oklab, var(--theme-color-primary) 15%, transparent);
    border-color: var(--theme-color-primary);
}

/* Sidebar navigation - hover state */
[data-nav-main] a:hover,
[data-nav-main] button:hover {
    background-color: color-mix(in oklab, var(--theme-color-primary) 8%, transparent);
}

/* Links with brand color */
a:not([data-ui-button]):not([class*="text-"]):hover {
    color: var(--theme-color-primary);
}

/* Tab active state */
.tab-button.active {
    border-color: var(--theme-color-primary);
    color: var(--theme-color-primary);
}

.dark .tab-button.active {
    border-color: #1a8f6e;
    color: #1a8f6e;
}

/* Pill tab active state */
.pill-tab.active {
    background-color: color-mix(in oklab, var(--theme-color-primary) 15%, transparent);
    color: var(--theme-color-primary);
}

.dark .pill-tab.active {
    background-color: color-mix(in oklab, #1a8f6e 20%, transparent);
    color: #1a8f6e;
}

/* Badge styling for brand accent (red) */
[data-ui-badge][data-color="red"],
.badge-red {
    background-color: #9C2B32;
    color: #ffffff;
}

/* Focus ring with brand color */
:focus-visible {
    --focus-outline-color: var(--theme-color-primary);
}

/* Checkbox and radio checked state */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--theme-color-primary);
    border-color: var(--theme-color-primary);
}

/* Toggle/switch checked state */
[data-state="checked"] [data-ui-switch-thumb],
.toggle-container.on {
    background-color: var(--theme-color-primary);
}