/* online-toolbox.net — Shared Styles */

body {
    font-family: 'Inter', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hero-gradient {
    background: linear-gradient(135deg, #006194 0%, #007bb9 100%);
}

/* ── Drop Zone Feedback ── */
/* Global drag-over state: injected via JS on any element with border-dashed */
.otb-dragover {
    border-color: var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent),
                inset 0 0 20px color-mix(in srgb, var(--color-primary) 5%, transparent) !important;
    transform: scale(1.01);
    transition: all 0.15s ease;
}
.otb-dragover * {
    pointer-events: none;
}

/* ── MD3 Color System via CSS Custom Properties ── */
/* Light Mode (default) */
:root,
html.light {
    --color-primary: #006194;
    --color-surface-container: #e5eeff;
    --color-surface: #f8f9ff;
    --color-on-surface: #0b1c30;
    --color-surface-tint: #006398;
    --color-surface-container-high: #dce9ff;
    --color-primary-container: #007bb9;
    --color-on-secondary-fixed: #0d1c2e;
    --color-on-secondary-container: #57657a;
    --color-tertiary-container: #00855b;
    --color-surface-container-low: #eff4ff;
    --color-primary-fixed-dim: #93ccff;
    --color-tertiary-fixed: #6ffbbe;
    --color-secondary-fixed: #d5e3fc;
    --color-on-secondary: #ffffff;
    --color-error: #ba1a1a;
    --color-surface-container-highest: #d3e4fe;
    --color-on-tertiary-container: #f5fff6;
    --color-on-secondary-fixed-variant: #3a485b;
    --color-inverse-primary: #93ccff;
    --color-error-container: #ffdad6;
    --color-surface-dim: #cbdbf5;
    --color-on-tertiary-fixed-variant: #005236;
    --color-on-surface-variant: #3f4850;
    --color-primary-fixed: #cce5ff;
    --color-on-error: #ffffff;
    --color-tertiary-fixed-dim: #4edea3;
    --color-secondary: #515f74;
    --color-on-tertiary: #ffffff;
    --color-surface-container-lowest: #ffffff;
    --color-on-tertiary-fixed: #002113;
    --color-surface-variant: #d3e4fe;
    --color-outline-variant: #bfc7d2;
    --color-on-error-container: #93000a;
    --color-on-primary-container: #fdfcff;
    --color-surface-bright: #f8f9ff;
    --color-secondary-fixed-dim: #b9c7df;
    --color-on-background: #0b1c30;
    --color-on-primary-fixed-variant: #004b73;
    --color-on-primary-fixed: #001d31;
    --color-outline: #707881;
    --color-on-primary: #ffffff;
    --color-secondary-container: #d5e3fc;
    --color-background: #f8f9ff;
    --color-tertiary: #006947;
    --color-inverse-surface: #213145;
    --color-inverse-on-surface: #eaf1ff;
}

/* Dark Mode */
html.dark {
    --color-primary: #93ccff;
    --color-surface-container: #1a2d42;
    --color-surface: #0b1c30;
    --color-on-surface: #dce3ed;
    --color-surface-tint: #93ccff;
    --color-surface-container-high: #243848;
    --color-primary-container: #004b73;
    --color-on-secondary-fixed: #0d1c2e;
    --color-on-secondary-container: #b9c7df;
    --color-tertiary-container: #005236;
    --color-surface-container-low: #0f2236;
    --color-primary-fixed-dim: #93ccff;
    --color-tertiary-fixed: #6ffbbe;
    --color-secondary-fixed: #d5e3fc;
    --color-on-secondary: #233447;
    --color-error: #ffb4ab;
    --color-surface-container-highest: #2e4858;
    --color-on-tertiary-container: #4edea3;
    --color-on-secondary-fixed-variant: #3a485b;
    --color-inverse-primary: #006194;
    --color-error-container: #93000a;
    --color-surface-dim: #0b1c30;
    --color-on-tertiary-fixed-variant: #005236;
    --color-on-surface-variant: #bfc7d2;
    --color-primary-fixed: #cce5ff;
    --color-on-error: #690005;
    --color-tertiary-fixed-dim: #4edea3;
    --color-secondary: #b9c7df;
    --color-on-tertiary: #00391f;
    --color-surface-container-lowest: #06121f;
    --color-on-tertiary-fixed: #002113;
    --color-surface-variant: #3f4850;
    --color-outline-variant: #3f4850;
    --color-on-error-container: #ffdad6;
    --color-on-primary-container: #cce5ff;
    --color-surface-bright: #2e4858;
    --color-secondary-fixed-dim: #b9c7df;
    --color-on-background: #dce3ed;
    --color-on-primary-fixed-variant: #004b73;
    --color-on-primary-fixed: #001d31;
    --color-outline: #8a929b;
    --color-on-primary: #003350;
    --color-secondary-container: #3a485b;
    --color-background: #0b1c30;
    --color-tertiary: #4edea3;
    --color-inverse-surface: #dce3ed;
    --color-inverse-on-surface: #213145;

    color-scheme: dark;
}

/* Dark mode overrides for elements using hardcoded colors */
html.dark .hero-gradient {
    background: linear-gradient(135deg, #004b73 0%, #006194 100%);
}

html.dark input,
html.dark textarea,
html.dark select {
    color-scheme: dark;
}

/* Dark mode toggle transition */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}