/* CSS Variables
-------------------------------------------------- */

/* TABLE OF CONTENTS
 * - Layout & Spacing
 * - Buttons
 * - Inputs
 * - Fonts & Typography
 * - Font Sizes
 * - Colors (Base Palette)
 * - Color Variants (Text)
 * - Color Variants (Background)
 * - Color Variants (Primary)
 * - Color Variants (Secondary)
 * - Color Variants (Accent)
 * - Color Variants (Success)
 * - Color Variants (Warning)
 * - Color Variants (Error)
 * - Component & UI
 * - Theme Customization
 * - Dark Theme Override
 */

:root {
    /* LAYOUT & SPACING
    -------------------------------------------------- */
    --base-font-size: 100%;    /* 62.5% for typical 16px browser default = 10px */

    /* CSSkel inserts a padding on heach frame to make your life easy
     * and forget about paddings in cols. You can turn this off using 0 */
    --mobile-padding: 10px;

    /* Spacing variables for margin and padding utilities */
    --spacing-unit: .25rem;
    --spacer: calc(var(--spacing-unit) * 4);
    --grid-gap: calc(var(--spacing-unit) * 4);

    /* BUTTONS
    -------------------------------------------------- */
    --button-height: 38px;
    --button-padding: 0 30px;
    --button-fontsize: 11px;
    --button-weight: 600;
    --button-letter-spacing: .08rem;
    --button-border-radius: 4px;
    
    /* INPUTS
    -------------------------------------------------- */
    --input-padding: 6px 10px;
    --input-height: var(--button-height);
    --textarea-min-height: 6.5em;

    /* FONTS & TYPOGRAPHY
    -------------------------------------------------- */
    /* Reference: https://modernfontstacks.com/ */
    --font-system-ui: system-ui, sans-serif;
    --font-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --font-old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --font-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
    --font-geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --font-classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
    --font-neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --font-monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
    --font-monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    --font-rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    --font-slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
    --font-antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
    --font-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
    --font-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
    --headers-weight: 600;

    --font-size-00: .5rem;
    --font-size-0: .75rem;
    --font-size-1: 1rem;
    --font-size-2: 1.1rem;
    --font-size-3: 1.25rem;
    --font-size-4: 1.5rem;
    --font-size-5: 2rem;
    --font-size-6: 2.5rem;
    --font-size-7: 3rem;
    --font-size-8: 3.5rem;

    /* FONT SIZES
    -------------------------------------------------- */
    /* Defined above in --font-size-0 through --font-size-8 */

    /* COLORS - BASE PALETTE
    -------------------------------------------------- */
    /* Generated using https://www.realtimecolors.com/ */

    --text: #091613;
    --background: #f2f9f8;
    --primary: #41689b;
    --secondary: #a4aad8;
    --accent: #1a3aae;
    --success: #076b3d;
    --warning: #ca9c03;
    --error: #cf090293;

    /* Color variables for semantic use in components */
    --color-text: var(--text);
    --color-background: var(--background);
    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --color-accent: var(--accent);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-error: var(--error);
    /* Generate inverse text color https://claude.ai/chat/d5f7a0c4-b2a0-4cd8-a8d0-6a59a0dfba34*/
    --text-inverse: oklch(from var(--text) clamp(0.15, calc(1 - l), 0.95) c h);
    --color-text-inverse: var(--text-inverse);

    /* TEXT COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-text-5: color-mix(in srgb, var(--text) 5%, transparent);
    --color-text-10: color-mix(in srgb, var(--text) 10%, transparent);
    --color-text-20: color-mix(in srgb, var(--text) 20%, transparent);
    --color-text-30: color-mix(in srgb, var(--text) 30%, transparent);
    --color-text-40: color-mix(in srgb, var(--text) 40%, transparent);
    --color-text-50: color-mix(in srgb, var(--text) 50%, transparent);
    --color-text-60: color-mix(in srgb, var(--text) 60%, transparent);
    --color-text-70: color-mix(in srgb, var(--text) 70%, transparent); 
    --color-text-80: color-mix(in srgb, var(--text) 80%, transparent);
    --color-text-90: color-mix(in srgb, var(--text) 90%, transparent);

    --color-text-inverse-5: color-mix(in srgb, var(--text-inverse) 5%, transparent);
    --color-text-inverse-10: color-mix(in srgb, var(--text-inverse) 10%, transparent);
    --color-text-inverse-20: color-mix(in srgb, var(--text-inverse) 20%, transparent);
    --color-text-inverse-30: color-mix(in srgb, var(--text-inverse) 30%, transparent);
    --color-text-inverse-40: color-mix(in srgb, var(--text-inverse) 40%, transparent);
    --color-text-inverse-50: color-mix(in srgb, var(--text-inverse) 50%, transparent);
    --color-text-inverse-60: color-mix(in srgb, var(--text-inverse) 60%, transparent);
    --color-text-inverse-70: color-mix(in srgb, var(--text-inverse) 70%, transparent);
    --color-text-inverse-80: color-mix(in srgb, var(--text-inverse) 80%, transparent);
    --color-text-inverse-90: color-mix(in srgb, var(--text-inverse) 90%, transparent);

    /* BACKGROUND COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-background-5: color-mix(in srgb, var(--background) 5%, transparent);
    --color-background-10: color-mix(in srgb, var(--background) 10%, transparent);
    --color-background-20: color-mix(in srgb, var(--background) 20%, transparent);
    --color-background-30: color-mix(in srgb, var(--background) 30%, transparent);
    --color-background-40: color-mix(in srgb, var(--background) 40%, transparent);
    --color-background-50: color-mix(in srgb, var(--background) 50%, transparent);
    --color-background-60: color-mix(in srgb, var(--background) 60%, transparent);
    --color-background-70: color-mix(in srgb, var(--background) 70%, transparent);
    --color-background-80: color-mix(in srgb, var(--background) 80%, transparent);
    --color-background-90: color-mix(in srgb, var(--background) 90%, transparent);

    /* PRIMARY COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-primary-5: color-mix(in srgb, var(--primary) 5%, transparent);
    --color-primary-10: color-mix(in srgb, var(--primary) 10%, transparent);
    --color-primary-20: color-mix(in srgb, var(--primary) 20%, transparent);
    --color-primary-30: color-mix(in srgb, var(--primary) 30%, transparent);
    --color-primary-40: color-mix(in srgb, var(--primary) 40%, transparent);
    --color-primary-50: color-mix(in srgb, var(--primary) 50%, transparent);
    --color-primary-60: color-mix(in srgb, var(--primary) 60%, transparent);
    --color-primary-70: color-mix(in srgb, var(--primary) 70%, transparent);
    --color-primary-80: color-mix(in srgb, var(--primary) 80%, transparent);
    --color-primary-90: color-mix(in srgb, var(--primary) 90%, transparent);

    /* SECONDARY COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-secondary-5: color-mix(in srgb, var(--secondary) 5%, transparent);
    --color-secondary-10: color-mix(in srgb, var(--secondary) 10%, transparent);
    --color-secondary-20: color-mix(in srgb, var(--secondary) 20%, transparent);
    --color-secondary-30: color-mix(in srgb, var(--secondary) 30%, transparent);
    --color-secondary-40: color-mix(in srgb, var(--secondary) 40%, transparent);
    --color-secondary-50: color-mix(in srgb, var(--secondary) 50%, transparent);
    --color-secondary-60: color-mix(in srgb, var(--secondary) 60%, transparent);
    --color-secondary-70: color-mix(in srgb, var(--secondary) 70%, transparent);   
    --color-secondary-80: color-mix(in srgb, var(--secondary) 80%, transparent);
    --color-secondary-90: color-mix(in srgb, var(--secondary) 90%, transparent);

    /* ACCENT COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-accent-5: color-mix(in srgb, var(--accent) 5%, transparent);
    --color-accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
    --color-accent-20: color-mix(in srgb, var(--accent) 20%, transparent);
    --color-accent-30: color-mix(in srgb, var(--accent) 30%, transparent);
    --color-accent-40: color-mix(in srgb, var(--accent) 40%, transparent);
    --color-accent-50: color-mix(in srgb, var(--accent) 50%, transparent);
    --color-accent-60: color-mix(in srgb, var(--accent) 60%, transparent);
    --color-accent-70: color-mix(in srgb, var(--accent) 70%, transparent);
    --color-accent-80: color-mix(in srgb, var(--accent) 80%, transparent);
    --color-accent-90: color-mix(in srgb, var(--accent) 90%, transparent); 

    /* SUCCESS COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-success-5: color-mix(in srgb, var(--success) 5%, transparent);
    --color-success-10: color-mix(in srgb, var(--success) 10%, transparent);
    --color-success-20: color-mix(in srgb, var(--success) 20%, transparent);
    --color-success-30: color-mix(in srgb, var(--success) 30%, transparent);
    --color-success-40: color-mix(in srgb, var(--success) 40%, transparent);
    --color-success-50: color-mix(in srgb, var(--success) 50%, transparent);
    --color-success-60: color-mix(in srgb, var(--success) 60%, transparent);
    --color-success-70: color-mix(in srgb, var(--success) 70%, transparent);
    --color-success-80: color-mix(in srgb, var(--success) 80%, transparent);
    --color-success-90: color-mix(in srgb, var(--success) 90%, transparent);

    /* WARNING COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-warning-5: color-mix(in srgb, var(--warning) 5%, transparent);
    --color-warning-10: color-mix(in srgb, var(--warning) 10%, transparent);
    --color-warning-20: color-mix(in srgb, var(--warning) 20%, transparent);
    --color-warning-30: color-mix(in srgb, var(--warning) 30%, transparent);
    --color-warning-40: color-mix(in srgb, var(--warning) 40%, transparent);
    --color-warning-50: color-mix(in srgb, var(--warning) 50%, transparent);
    --color-warning-60: color-mix(in srgb, var(--warning) 60%, transparent);
    --color-warning-70: color-mix(in srgb, var(--warning) 70%, transparent);
    --color-warning-80: color-mix(in srgb, var(--warning) 80%, transparent);
    --color-warning-90: color-mix(in srgb, var(--warning) 90%, transparent);

    /* ERROR COLOR VARIANTS (5% - 90% opacity)
    -------------------------------------------------- */
    --color-error-5: color-mix(in srgb, var(--error) 5%, transparent);
    --color-error-10: color-mix(in srgb, var(--error) 10%, transparent);
    --color-error-20: color-mix(in srgb, var(--error) 20%, transparent);
    --color-error-30: color-mix(in srgb, var(--error) 30%, transparent);
    --color-error-40: color-mix(in srgb, var(--error) 40%, transparent);
    --color-error-50: color-mix(in srgb, var(--error) 50%, transparent);
    --color-error-60: color-mix(in srgb, var(--error) 60%, transparent);
    --color-error-70: color-mix(in srgb, var(--error) 70%, transparent);
    --color-error-80: color-mix(in srgb, var(--error) 80%, transparent);
    --color-error-90: color-mix(in srgb, var(--error) 90%, transparent);

    /* COMPONENT & UI VARIABLES
    -------------------------------------------------- */
    --accent-color: var(--color-primary);
    --accent-color-hover: oklch(from var(--color-primary) l min(c * 2.5, 0.5) h);

    --shadow-color: var(--text);

    --transition-base: .2s;

    --button-primary-color: white;

    --border-color: var(--color-text-40);
    --border-color-softer: var(--color-text-20);

    /* Navbar vars */
    --navbar-background: var(--color-background);
    --navbar-color: #444;
    --navbar-hover-background: #f4f4f4;
    --navbar-hover-color: #000;
}

/* AUTOMATIC DARK THEME (based on OS preference)
-------------------------------------------------- */

/* Respects system dark mode preference when enable-dark-mode class is present */
@media (prefers-color-scheme: dark) {
    :root.enable-dark-mode {
        --text: #e9f6f3;
        --background: #060e0d;
        --primary: #648bbe;
        --secondary: #262c59;
        --accent: #5272e5;
        --success: #34c48f;
        --warning: #e2b203;
        --error: #e03c3c;

        /* Navbar vars */
        --navbar-background: var(--color-background);
        --navbar-color: #ddd;
        --navbar-hover-background: #151515;
        --navbar-hover-color: #f0f0f0;
    }
}

/* MANUAL DARK THEME OVERRIDE
-------------------------------------------------- */

/* For use with a data-theme attribute on the root element i.e. <html data-theme="dark"> */
:root[data-theme="dark"] {
    --text: #e9f6f3;
    --background: #060e0d;
    --primary: #648bbe;
    --secondary: #262c59;
    --accent: #5272e5;
    --success: #34c48f;
    --warning: #e2b203;
    --error: #e03c3c;

    /* Navbar vars */
    --navbar-background: var(--color-background);
    --navbar-color: #ddd;
    --navbar-hover-background: #151515;
    --navbar-hover-color: #f0f0f0;
}

/* MANUAL LIGHT THEME OVERRIDE
-------------------------------------------------- */

/* For use with a data-theme attribute on the root element i.e. <html data-theme="light"> */
:root[data-theme="light"] {
    --text: #091613;
    --background: #f2f9f8;
    --primary: #41689b;
    --secondary: #a4aad8;
    --accent: #1a3aae;
    --success: #076b3d;
    --warning: #ca9c03;
    --error: #cf090293;

    /* Navbar vars */
    --navbar-background: var(--color-background);
    --navbar-color: #444;
    --navbar-hover-background: #f4f4f4;
    --navbar-hover-color: #000;
}