@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ====================================================
   VARIABLES
==================================================== */
:root {
    --background: #fff; /*default background color*/
    --color: #ccc; /*default font color*/
    --border-color: #000; /*default border color*/

    /* --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; */
    --font-family: "Roboto", sans-serif; 
    --font-size: 0.9rem;
    --font-weight: 400;
    --line-height: 1.6;

    --header-height:140px;
    --container-max-width: 1200px;
    --container-padding: 0.75rem;  /* left + right*/

    --border: 1px solid var(--border-color);
    --border-radius: 5px;
    --box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);

    --transition-duration: 0.4s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}


/* Logo color - #3DBCEE */

/* System Colors */
:root {
    color-scheme: light dark;

    --background: light-dark(#fff, #0F172A); /*default background color*/
    --color:      light-dark(#1E293B, #E2E8F0); /*default font color*/
    /* Create muted/subtle variants by adjusting the percentage (0–100%). */
    /* Example: color: color-mix(in srgb, var(--color) 70%, transparent); */

    --border-color: light-dark(#CBD5E1, #334155); /*default border color*/

    /* Used to create any shade of a given color */
    /* Example: color-mix(in srgb, var(--background) 98%, var(--color-mix)); */
    --mix-color: light-dark(#000, #FFF); 

    --primary-color: #3DBCEE;   /* logo color */
    --secondary-color: #6D5CE0; /* harmonious cool violet */
    --color-black: light-dark(#1E293B, #E2E8F0);

    --link-color: light-dark(#3DBCEE, #5FC7F0);
    --link-color-hover: light-dark(#2196C7, #7FD4EE);
    --link-color-visited: light-dark(#6D5CE0, #9B8FF0);

    /* Surface Hierarchy */
    /* Primary */
    --primary-surface-bg: light-dark(#f1f1f1, #1E293B);
    --primary-surface-text: light-dark(#1E293B, #E2E8F0);
    --primary-surface-border: light-dark(#c6c7c9, #334155);

    /* Secondary */
    --secondary-surface-bg: light-dark(#F8FAFC, #243447);
    --secondary-surface-text: light-dark(#334155, #CBD5E1);
    --secondary-surface-border: light-dark(#D8E1E9, #38495D);

    /* Tertiary */
    --tertiary-surface-bg: light-dark(#F1F5F9, #2B3F54);
    --tertiary-surface-text: light-dark(#475569, #B7C3D0);
    --tertiary-surface-border: light-dark(#CBD5E1, #45566B);

    /* Quaternary */
    --quaternary-surface-bg: light-dark(#E2E8F0, #385169);
    --quaternary-surface-text: light-dark(#64748B, #9FADC0);
    --quaternary-surface-border: light-dark(#B8C4D1, #526478);

    /* Alert Box Color Palette */
    /* Info — tied directly to the logo hue */
    --info-bg: light-dark(#E7F7FD, #123244);
    --info-text: light-dark(#0A6E93, #8FDDF7);
    --info-border-color: light-dark(#7FD4EE, #2C6E8A);
    --info-border: 1px solid var(--info-border-color);

    /* Success */
    --success-bg: light-dark(#E8F5E9, #1E4026);
    --success-text: light-dark(#2E7D32, #A5E2B5);
    --success-border-color: light-dark(#81C784, #3A6B47);
    --success-border: 1px solid var(--success-border-color);

    /* Warning */
    --caution-bg: light-dark(#FFF8E1, #3B2A0D);
    --caution-text: light-dark(#F57C00, #FFD080);
    --caution-border-color: light-dark(#FFB74D, #A5752B);
    --caution-border: 1px solid var(--caution-border-color);

    /* Danger */
    --critical-bg: light-dark(#FFEBEE, #4A1E1E);
    --critical-text: light-dark(#C62828, #FBBCBC);
    --critical-border-color: light-dark(#E57373, #B64444);
    --critical-border: 1px solid var(--critical-border-color);

    --color-toggle-bg: light-dark(#E2E8F0, #334155);
    --color-toggle-icon: light-dark(#FFBB00, #FFDD88);

    /* Form Elements */
    --accent-color: light-dark(#3DBCEE, #5FC7F0);

    --label-color: light-dark(#334155, #CBD5E1);
    --placeholder-color: light-dark(#94A3B8, #7A8CA3);
    --input-color: light-dark(#1E293B, #E2E8F0);
    --input-caret-color: light-dark(#3DBCEE, #5FC7F0);
    --input-background-color: light-dark(#FFFFFF, #1E293B);
    --input-background-color-on-hover: light-dark(#FFFFFF, #1E293B);
    --input-background-color-on-focus: light-dark(#F8FAFC, #243447);
    --input-border-color: light-dark(#D8E1E9, #45566B);
    --input-border-color-on-hover: #3DBCEE;
    --input-border-color-on-focus: #3DBCEE;

    --radio-border-color: #7C8FA3;
    --checkbox-border-color: var(--radio-border-color);

    --button-color: light-dark(#1E293B, #E2E8F0);
    --button-border-color: light-dark(#D8E1E9, #45566B);
    --button-background-color: light-dark(#FFFFFF, #243447);
}

/* Additional Colors */
:root {
     /* Green: Vibrant Emerald / Bright Mint */
    --green: light-dark(#10B981, #34D399);

    /* Blue: Bright Azure / Sky Cyan */
    --blue: light-dark(#0284C7, #38BDF8);
    --royal-blue: light-dark(#306ff6, #306ff6);

    /* Yellow: Deep Amber / Warm Gold (Adjusted so light mode stays legible) */
    --yellow: light-dark(#D97706, #FBBF24);
    --orange: light-dark(#ea580c, #ea580c);
}

/* Manual override: force a theme regardless of system preference */
:root.light { color-scheme: light; }
:root.dark  { color-scheme: dark; }