/**
* Zodiak Dark theme color variables.
* This file defines the color variables for the Zodiak color theme.
* These variables are used as semantic colors throughout the application
* to ensure a consistent and maintainable color scheme.
**/

@media (prefers-color-scheme: light) {
    :root {
         /* Icon Variable*/
         --zdk-icon-more: url(../images/icon-more-small-dark.svg);
        --zdk-text-primary: #272936;
        --zdk-text-secondary: #565862;
        --zdk-text-inverse: #FFF;
        --zdk-text-disabled: #9A9BA1;
        --zdk-text-always-white: #FFF;
        --zdk-text-always-black: #272936;
        --zdk-text-link: #00324D;
        --zdk-text-link-hover: #00476D;
        --zdk-text-link-pressed: #005786;
        --zdk-text-info: #6B6D76;
        --zdk-text-info-on-saturated: #3E3F4B;
        --zdk-text-notice: #F68F40;
        --zdk-text-notice-on-saturated: #CC640F;
        --zdk-text-positive: #4EB972;
        --zdk-text-positive-on-saturated: #1E5631;
        --zdk-text-negative: #9E0029;
        --zdk-text-negative-on-saturated: #9E0029;
         /* Surface */
        --zdk-page-background: #FFF;
        --zdk-surface-primary: #FFF;
        --zdk-surface-secondary: #FAFAFA;
        --zdk-surface-tertiary: #E7E7E8;
        --zdk-surface-brand-primary-light-tint: #F6FAFE;
        --zdk-surface-brand-secondary-light-tint: #E9F4FC;
        --zdk-surface-brand-tertiary-light-tint: #12ABDB;
        --zdk-surface-brand-sapphire-light-tint: #EDF5F7;
        --zdk-surface-primary-saturated: #1D1F29;
        --zdk-surface-secondary-saturated: #4A4C57;
        --zdk-surface-brand-sapphire-primary-saturated: #286370;
        --zdk-surface-brand-sapphire-secondary-saturated: #338091; 
        --zdk-surface-brand-primary-saturated: #00476D;
        --zdk-surface-brand-secondary-saturated: #0070AD;
        --zdk-surface-disabled: #FAFAFA;
        --zdk-surface-inverse: #3E3F4B;
        --zdk-surface-always-white: #FFF;
        --zdk-surface-always-black: #000;
        --zdk-surface-info-light-tint: #6B6D76;
        --zdk-surface-info-saturated: #FAFAFA;
        --zdk-surface-notice-light-tint: #F68F40;
        --zdk-surface-notice-saturated: #FCB988;
        --zdk-surface-positive: #EFF7F5;
        --zdk-surface-negative: #FBF2F3;
        /* Border */
        --zdk-border-primary: #B1B2B6;
        --zdk-border-secondary: #E7E7E8;
        --zdk-border-inverse: #FFF;
        --zdk-border-info: #0070AD;
        --zdk-border-negative: #DD1D46;
        --zdk-border-positive: #4EB972;
        /* Action */
        --zdk-action-active: #0070AD;
        --zdk-action-content: #1D1F29;
        --zdk-action-content-white: #FFF;
        --zdk-action-content-inverse: #FFF;
        --zdk-action-focus-ring: #B1B2B6;
        --zdk-action-focus-ring-on-saturated: #FFF;
        --zdk-action-primary-default: #00324D;
        --zdk-action-highlight : #72E7D6;
        --zdk-action-primary-hover: #00476D;
        --zdk-action-primary-pressed: #005786;
        --zdk-action-primary-disabled: #C7C8CB;
        --zdk-action-primary-default-on-saturated: #FFF;
        --zdk-action-primary-hover-on-saturated: #E7E7E8;
        --zdk-action-primary-pressed-on-saturated: #FAFAFA;
        --zdk-action-primary-disabled-on-saturated: #C7C8CB;
        --zdk-action-primary-default-on-photographic: rgba(0, 0, 0, 0.15);
        --zdk-action-secondary-default: #00324D;
        --zdk-action-secondary-hover: #00324D;
        --zdk-action-secondary-pressed: #00476D;
        --zdk-action-secondary-disabled: #A6A6AB;
        --zdk-action-secondary-default-on-saturated: #FFF;
        --zdk-action-secondary-hover-on-saturated: #FFF;
        --zdk-action-secondary-pressed-on-saturated: #E7E7E8;
        --zdk-action-secondary-disabled-on-saturated: #777880;
        --zdk-action-text-link-hover:#D4D4D6;
    
        /* Custom color variables */
        --zdk-surface-brand-sapphire-800: #20515C;
        --zdk-surface-brand-teal-800: #00E6E3;

    }
}

@media (prefers-color-scheme: dark) {

    body {
        background-color: var(--zdk-page-background); /* Dark mode background color */
        color: var(--zdk-surface-always-white); /* Dark mode text color */
      }
      
    :root {
        /* Icon Variable*/
         --zdk-icon-more: url(../images/icon-more-small-white.svg);

        --zdk-text-primary: #FAFAFA;
        --zdk-text-secondary: #565862;
        --zdk-text-inverse: #272936;
        --zdk-text-disabled: #4A4C57;
        --zdk-text-always-white: #FFF;
        --zdk-text-always-black: #272936;
        --zdk-text-link: #FFF;
        --zdk-text-link-hover: #E7E7E8;
        --zdk-text-link-pressed: #FAFAFA;
        --zdk-text-info: #C7C8CB;
        --zdk-text-info-on-saturated: #9A9BA1;
        --zdk-text-notice: #F68F40;
        --zdk-text-notice-on-saturated: #FCB988;
        --zdk-text-positive: #4EB972;
        --zdk-text-positive-on-saturated: #AFE3BD;
        --zdk-text-negative: #FFA7A9;
        --zdk-text-negative-on-saturated: #FF848B;
        /* Surface */
        --zdk-page-background: #111218;
        --zdk-surface-primary: #1D1F29;
        --zdk-surface-secondary: #272936;
        --zdk-surface-tertiary: #3E3F4B;
        --zdk-surface-brand-primary-light-tint: #272936;
        --zdk-surface-brand-secondary-light-tint: #00476D;
        --zdk-surface-brand-tertiary-light-tint: #0070AD;
        --zdk-surface-brand-sapphire-light-tint: #173941;
        --zdk-surface-primary-saturated: #272936;
        --zdk-surface-secondary-saturated: #333541;
        --zdk-surface-brand-sapphire-primary-saturated: #173941;
        --zdk-surface-brand-sapphire-secondary-saturated: #20515C;
        --zdk-surface-brand-primary-saturated: #00324D;
        --zdk-surface-brand-secondary-saturated: #005786;
        --zdk-surface-disabled: #4A4C57;
        --zdk-surface-inverse: #FFF;
        --zdk-surface-always-white: #FFF;
        --zdk-surface-always-black: #000;
        --zdk-surface-info-light-tint: #12ABDB;
        --zdk-surface-info-saturated: #00476D;
        --zdk-surface-notice-light-tint: #F9A464;
        --zdk-surface-notice-saturated: #FCB988;
        --zdk-surface-positive: #173941;
        --zdk-surface-negative: #5D051A;
        /* Border */
        --zdk-border-primary: #83848B;
        --zdk-border-secondary: #3E3F4B;
        --zdk-border-inverse: #272936;
        --zdk-border-info: #12ABDB;
        --zdk-border-negative: #FF6270;
        --zdk-border-positive: #8AD9A2;
        /* Action */
        --zdk-action-active: #B4DBF1;
        --zdk-action-content: #1D1F29;
        --zdk-action-content-white: #FFF;
        --zdk-action-content-inverse: #1D1F29;
        --zdk-action-focus-ring: #272936;
        --zdk-action-focus-ring-on-saturated: #272936;
         --zdk-action-highlight : #00AE9D;
        --zdk-action-primary-default: #FFF;
        --zdk-action-primary-hover: #E7E7E8;
        --zdk-action-primary-pressed: #FAFAFA;
        --zdk-action-primary-disabled: #C7C8CB;
        --zdk-action-primary-default-on-saturated: #FFF;
        --zdk-action-primary-hover-on-saturated: #E7E7E8;
        --zdk-action-primary-pressed-on-saturated: #FAFAFA;
        --zdk-action-primary-disabled-on-saturated: #C7C8CB;
        --zdk-action-primary-default-on-photographic: rgba(0, 0, 0, 0.15);
        --zdk-action-secondary-default: #FFF;
        --zdk-action-secondary-hover: #FFF;
        --zdk-action-secondary-pressed: #E7E7E8;
        --zdk-action-secondary-disabled: #A6A6AB;
        --zdk-action-secondary-default-on-saturated: #FFF;
        --zdk-action-secondary-hover-on-saturated: #FFF;
        --zdk-action-secondary-pressed-on-saturated: #E7E7E8;
        --zdk-action-secondary-disabled-on-saturated: #777880;
         --zdk-action-text-link-hover:#4A4C57;
    
        /* Custom color variables */
        --zdk-surface-brand-sapphire-800: #173941;
        --zdk-surface-brand-teal-800: #009190;
    }
}