/*
 * Copyright 2023 Aracro Products. All rights reserved
 *
 * Author: Aragorn Crozier
 */

:root {
    --ap-primary-light: #72a6ff;
    --ap-secondary-light: #0e1a4f;
    --ap-secondary-surface-light: #e5ecff;
    --ap-on-secondary-surface-light: #212529;
    --ap-background-light: white;
    --ap-on-background-light: black;
    --ap-divider-light: #444444;
    --ap-border-light: rgba(0, 0, 0, 0.175);
}

:root {
    --ap-accent: #1c318d;
    --ap-on-accent: #e5ecff;
    --ap-primary: var(--ap-primary-dark, var(--ap-primary-light));
    --ap-secondary: var(--ap-secondary-dark, var(--ap-secondary-light));
    --ap-secondary-surface: var(--ap-secondary-surface-dark, var(--ap-secondary-surface-light));
    --ap-on-secondary-surface: var(--ap-on-secondary-surface-dark, var(--ap-on-secondary-surface-light));
    --ap-background: var(--ap-background-dark, var(--ap-background-light));
    --ap-on-background: var(--ap-on-background-dark, var(--ap-on-background-light));
    --ap-divider: var(--ap-divider-dark, var(--ap-divider-light));
    --ap-on-primary: var(--ap-on-secondary-surface);
    --ap-on-secondary: var(--ap-secondary-surface);
    --ap-border: var(--ap-border-dark, var(--ap-border-light));
}

@media (prefers-color-scheme: dark) {
    :root {
        --ap-primary-dark: #0e1a4f;
        --ap-secondary-dark: #72a6ff;
        --ap-secondary-surface-dark: #1f1f1f;
        --ap-on-secondary-surface-dark: #e5ecff;
        --ap-background-dark: black;
        --ap-on-background-dark: white;
        --ap-divider-dark: #bbbbbb;
        --ap-border-dark: rgba(255, 255, 255, 0.175);
    }
}


.ap-bg-primary {
    background-color: var(--ap-primary);
    color: var(--ap-on-primary);
}

.ap-bg-secondary {
    background-color: var(--ap-secondary);
    color: var(--ap-on-secondary);
}

.ap-fg-secondary {
    color: var(--ap-secondary);
}

.ap-fg-primary {
    color: var(--ap-primary);
}

.ap-bg-secondary-surface {
    background-color: var(--ap-secondary-surface);
    color: var(--ap-on-secondary-surface);
}

.ap-background, input.ap-background {
    background-color: var(--ap-background);
    color: var(--ap-on-background);
}

.white {
    color: var(--ap-background);
}

.black {
    color: var(--ap-on-background);
}