/* =================================================================
   Design Tokens
   All colors, fonts, spacing, and radii as CSS custom properties.
   Override these for dark mode, high-contrast, or branded themes.
    https://www.figma.com/design/wdbqoxIpYbLEjshlNL2Yop/Design-System?node-id=0-1&p=f&view=variables&var-set-id=1668-35&m=dev
   ================================================================= */

:root {
    color-scheme: light dark;

    /* Typography */
    --font-primary: Inter;
    --font-semibold: InterSemiBold;

    /* Surfaces */
    --surface: #FFFFFF;
    --surface-secondary: #F5F8FA;
    --surface-hover: #EBF0F2;
    --surface-overlay: rgba(20, 23, 28, 0.5);

    /* Text */
    --headline-color: #1F0040;
    --text: rgba(31, 0, 64, 1);
    --text-muted: #676871;
    --text-secondary: #464853;
    --light-text: #676871;          /* Text.tertiary */

    /* Brand / Primary */
    --main-color: #1470CC;
    --secondary-color: #1470CC;
    --primary: rgba(20, 112, 204, 1);
    --secondary-link-color: #464853;

    /* Buttons */
    --btn-bg: #6EE7B7;
    --btn-fg: #1F0040;
    --btn-secondary-bg: #EBF0F2;
    --btn-secondary-fg: #1F0040;   /* Text.primary */
    --btn-bg-disabled: #D4F8EA;
    --btn-fg-disabled: #BCB3C6;
    --btn-danger-bg: rgba(204, 31, 78, 1);
    --btn-danger-fg: #FFFFFF;

    /* Borders */
    --border-primary: #D5D9DD;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --light-gray-bg: rgba(0, 0, 0, 0.1);
    --light-gray-border: 1px solid var(--light-gray-bg);

    /* Feedback */
    --alert: #CC1F4E;
    --light-alert: #FEF2F2;          /* Background.interactive-error-quaternary */
    --success-bg: #ECFDF5;
    --info-bg: #FFFBEB;

    /* Shadows */
    --shadow-sm: 0px 2px 10px 0px rgba(16, 24, 40, 0.12);
    --shadow-md: 0px 4px 10px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-dropdown: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
    --shadow-tile: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* Environment chip */
    --env-chip-bg: #fcd34d;
    --env-chip-text: #1f0040;
    --env-chip-bar-bg: #FDE68A;

    /* Scrollbar */
    --scrollbar-track: #f6f6f6;
    --scrollbar-thumb: #e6e6e6;
    --scrollbar-thumb-hover: #4070a0;

    /* Misc (kept for backward compat) */
    --background: rgba(255, 255, 255, 1);
    --background-primary: #FFF;
    --bright-light-gray: #F5F8FA;

    /* Notification shadow */
    --shadow-notification: 0px 4px 16px 0px rgba(3, 160, 239, 0.1), 0px 1px 4px 0px rgba(31, 0, 64, 0.1);

    /* HR / divider */
    --hr-color: #AB9FB7;

    /* Avatar */
    --avatar-bg: #E8F0FE;

    /* App tiles */
    --tile-border: #EBEEF0;          /* Border.muted */
    --tile-border-hover: #D5D9DD;    /* Border.primary */
    --tile-show-more-hover-bg: #f8faff;
    --tile-icon-blue-bg: #E8F4FD;
    --tile-icon-green-bg: #E6F9EF;
    --tile-icon-purple-bg: #F0E8FD;
    --tile-icon-orange-bg: #FEF3E2;
    --tile-icon-teal-bg: #E8F8F5;
    --tile-icon-red-bg: #FDE8E8;
    --tile-icon-gray-bg: #F3F4F6;
}

/* Hebrew font override */
html[lang="he"] {
    --font-primary: sans-serif;
    --font-semibold: sans-serif;
}

/* Dark mode — values sourced from Dark.tokens.json */
html[data-theme="dark"] {
    /* Surfaces — Background tokens */
    --surface: #14171C;                    /* Background.primary */
    --surface-secondary: #1D2025;          /* Background.secondary */
    --surface-hover: #282C33;              /* Background.tertiary */
    --surface-overlay: rgba(0, 0, 0, 0.7);

    /* Text tokens */
    --headline-color: #D5D9DD;             /* Text.primary */
    --text: #D5D9DD;                       /* Text.primary */
    --text-muted: #AAABB2;                 /* Text.tertiary */
    --text-secondary: #BFC1C8;             /* Text.secondary */
    --light-text: #AAABB2;                 /* Text.tertiary */

    /* Brand / Primary — Icon.primary-main */
    --main-color: #03A2F2;
    --secondary-color: #03A2F2;
    --primary: #03A2F2;
    --secondary-link-color: #BFC1C8;       /* Text.secondary */

    /* Buttons */
    --btn-bg: #A7F3D0;                     /* Background.interactive-primary */
    --btn-fg: #14171C;                     /* Text.inverse */
    --btn-secondary-bg: #464853;           /* Background.quinary — neutral complement to green primary */
    --btn-secondary-fg: #D5D9DD;           /* Text.primary */
    --btn-bg-disabled: #363B45;            /* System.disabled */
    --btn-fg-disabled: #676871;            /* Border.primary */
    --btn-danger-bg: #FD687B;              /* Background.interactive-error-primary */
    --btn-danger-fg: #14171C;              /* Text.inverse */

    /* Borders */
    --border-primary: #676871;             /* Border.primary */
    --light-gray-bg: rgba(255, 255, 255, 0.1);
    --light-gray-border: 1px solid var(--light-gray-bg);

    /* Feedback */
    --alert: #FD687B;                      /* Text.error-primary */
    --light-alert: #4A1315;                /* Background.interactive-error-quaternary */
    --success-bg: #064E3B;                 /* System.success-secondary */
    --info-bg: #0F436E;                    /* System.info-secondary */

    /* Shadows — Shadow token alphas (small 0.3, medium 0.4, large 0.8) */
    --shadow-sm: 0px 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0px 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.8);
    --shadow-dropdown: 0px 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-tile: 0 4px 16px rgba(0, 0, 0, 0.3);

    /* Environment chip — System.warning tokens */
    --env-chip-bg: #FBBF24;               /* System.warning-primary */
    --env-chip-text: #14171C;             /* Text.inverse */
    --env-chip-bar-bg: #92400E;           /* System.warning-secondary */

    /* Scrollbar */
    --scrollbar-track: #1D2025;           /* Background.secondary */
    --scrollbar-thumb: #363B45;           /* Background.quaternary */
    --scrollbar-thumb-hover: #03A2F2;     /* Icon.primary-main */

    /* Misc */
    --background: #14171C;                /* Background.primary */
    --background-primary: #14171C;        /* Background.primary */
    --bright-light-gray: #1D2025;         /* Background.secondary */

    --shadow-notification: 0px 4px 16px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.3);

    --hr-color: #30313C;                  /* Border.muted */

    --avatar-bg: #282C33;                 /* Background.tertiary */

    /* App tiles */
    --tile-border: #30313C;               /* Border.muted */
    --tile-border-hover: #676871;         /* Border.primary */
    --tile-show-more-hover-bg: #1D2025;   /* Background.secondary */
    --tile-icon-blue-bg: #065F9A;         /* Background.accent-secondary */
    --tile-icon-green-bg: #064E3B;        /* System.success-secondary */
    --tile-icon-purple-bg: #2A1E40;
    --tile-icon-orange-bg: #92400E;       /* System.warning-secondary */
    --tile-icon-teal-bg: #1D2025;         /* Background.secondary */
    --tile-icon-red-bg: #4A1315;          /* Background.interactive-error-quaternary */
    --tile-icon-gray-bg: #1D2025;         /* Background.secondary */
}

/* Phase 1 — OS dark preference (no JS, no server logic) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Surfaces */
        --surface: #14171C;
        --surface-secondary: #1D2025;
        --surface-hover: #282C33;
        --surface-overlay: rgba(0, 0, 0, 0.7);

        /* Text */
        --headline-color: #D5D9DD;
        --text: #D5D9DD;
        --text-muted: #AAABB2;
        --text-secondary: #BFC1C8;
        --light-text: #AAABB2;

        /* Brand / Primary */
        --main-color: #03A2F2;
        --secondary-color: #03A2F2;
        --primary: #03A2F2;
        --secondary-link-color: #BFC1C8;

        /* Buttons */
        --btn-bg: #A7F3D0;
        --btn-fg: #14171C;
        --btn-secondary-bg: #464853;
        --btn-secondary-fg: #D5D9DD;
        --btn-bg-disabled: #363B45;
        --btn-fg-disabled: #676871;
        --btn-danger-bg: #FD687B;
        --btn-danger-fg: #14171C;

        /* Borders */
        --border-primary: #676871;
        --light-gray-bg: rgba(255, 255, 255, 0.1);
        --light-gray-border: 1px solid var(--light-gray-bg);

        /* Feedback */
        --alert: #FD687B;
        --light-alert: #4A1315;
        --success-bg: #064E3B;
        --info-bg: #0F436E;

        /* Shadows */
        --shadow-sm: 0px 2px 10px rgba(0, 0, 0, 0.3);
        --shadow-md: 0px 4px 10px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.8);
        --shadow-dropdown: 0px 4px 8px rgba(0, 0, 0, 0.4);
        --shadow-tile: 0 4px 16px rgba(0, 0, 0, 0.3);

        /* Environment chip */
        --env-chip-bg: #FBBF24;
        --env-chip-text: #14171C;
        --env-chip-bar-bg: #92400E;

        /* Scrollbar */
        --scrollbar-track: #1D2025;
        --scrollbar-thumb: #363B45;
        --scrollbar-thumb-hover: #03A2F2;

        /* Misc */
        --background: #14171C;
        --background-primary: #14171C;
        --bright-light-gray: #1D2025;

        --shadow-notification: 0px 4px 16px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.3);

        --hr-color: #30313C;

        --avatar-bg: #282C33;

        /* App tiles */
        --tile-border: #30313C;
        --tile-border-hover: #676871;
        --tile-show-more-hover-bg: #1D2025;
        --tile-icon-blue-bg: #065F9A;
        --tile-icon-green-bg: #064E3B;
        --tile-icon-purple-bg: #2A1E40;
        --tile-icon-orange-bg: #92400E;
        --tile-icon-teal-bg: #1D2025;
        --tile-icon-red-bg: #4A1315;
        --tile-icon-gray-bg: #1D2025;
    }
}

/* High contrast */
@media (prefers-contrast: high) {
    :root {
        --border-primary: #000000;
        --light-gray-bg: rgba(0, 0, 0, 0.3);
        --shadow-md: 0px 4px 10px rgba(0, 0, 0, 0.5);
    }

    html[data-theme="dark"] {
        --border-primary: #FFFFFF;
        --light-gray-bg: rgba(255, 255, 255, 0.25);
    }
}

@media (prefers-contrast: high) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --border-primary: #FFFFFF;
        --light-gray-bg: rgba(255, 255, 255, 0.25);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}