@import 'tailwindcss';
@import 'tailwindcss-primeui';

/* Primary and Surface Palettes */
:root {
    --p-primary-50: #f4f7ed;
    --p-primary-100: #e9f0db;
    --p-primary-200: #dde8c9;
    --p-primary-300: #8db44b;
    --p-primary-400: #71903c;
    --p-primary-500: #4d6229;
    --p-primary-600: #3f6e64;
    --p-primary-700: #345a52;
    --p-primary-800: #2a4741;
    --p-primary-900: #213834;
    --p-primary-950: #0c1a17;
    --p-surface-0: #ffffff;
    --p-surface-50: #fafafa;
    --p-surface-100: #f4f4f5;
    --p-surface-200: #e4e4e7;
    --p-surface-300: #d4d4d8;
    --p-surface-400: #a1a1aa;
    --p-surface-500: #71717a;
    --p-surface-600: #52525b;
    --p-surface-700: #3f3f46;
    --p-surface-800: #27272a;
    --p-surface-900: #18181b;
    --p-surface-950: #09090b;
    --p-content-border-radius: 6px;
}

/* Light */
:root {
    --p-primary-color: var(--p-primary-500);
    --p-primary-contrast-color: var(--p-surface-0);
    --p-primary-hover-color: var(--p-primary-600);
    --p-primary-active-color: var(--p-primary-700);
    --p-content-border-color: var(--p-surface-200);
    --p-content-hover-background: var(--p-surface-100);
    --p-content-hover-color: var(--p-surface-800);
    --p-highlight-background: var(--p-primary-600);
    --p-highlight-color: var(--p-surface-0);
    --p-highlight-focus-background: var(--p-primary-100);
    --p-highlight-focus-color: var(--p-primary-800);
    --p-text-color: var(--p-surface-900);
    --p-text-hover-color: var(--p-surface-800);
    --p-text-muted-color: var(--p-surface-500);
    --p-text-hover-muted-color: var(--p-surface-600);
    --p-placeholder-color: var(--p-surface-500);
    --p-emphasis-color: var(--p-surface-900);
}

.primevue-select [data-p~=placeholder] {
    color: var(--p-surface-500);
}

li.primevue-select[aria-selected="true"],
li.primevue-select[data-p-selected="true"] {
    background-color: var(--p-primary-700);
    color: var(--p-surface-0);
}
li.primevue-select[data-p-focused="true"] {
    background-color: var(--p-primary-500);
    color: var(--p-surface-0);
}
.primevue-select [data-p~=disabled],
li.primevue-select[data-p-disabled="true"] {
    cursor: not-allowed;
    color: var(--p-surface-500);
}
/*
 * Dark Mode
 * Defaults to system, change the dark variant selector to match the CSS variable configuration.
 * For example;
 * @custom-variant dark (&:where(.app-dark, .app-dark *));
 * should match to;
 * :root[class="app-dark"]
*/
@media (prefers-color-scheme: dark) {
    :root {
        --p-primary-color: var(--p-primary-400);
        --p-primary-contrast-color: var(--p-surface-900);
        --p-primary-hover-color: var(--p-primary-300);
        --p-primary-active-color: var(--p-primary-200);
        --p-content-border-color: var(--p-surface-700);
        --p-content-hover-background: var(--p-surface-800);
        --p-content-hover-color: var(--p-surface-0);
        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
        --p-highlight-color: rgba(255, 255, 255, 0.87);
        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
        --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
        --p-text-color: var(--p-surface-0);
        --p-text-hover-color: var(--p-surface-0);
        --p-text-muted-color: var(--p-surface-400);
        --p-text-hover-muted-color: var(--p-surface-300);
    }
}