/*
 * ============================================
 *  BisConnect Website - Design System Variables
 *  Version: 1.0.0
 * ============================================
 */

/* ──────────────────────────────────────────────
   Light Mode (Default)
   ────────────────────────────────────────────── */
:root {
  /* ── Primary ── */
  --Primary: #65B946;
  --PrimaryText: #FFFFFF;
  --PrimaryHover: #51B22E;
  --PrimaryDisabled: #8CB97B;

  /* ── Disabled ── */
  --Disabled: #D4D4D4;
  --DisabledText: #949494;

  /* ── Background ── */
  --Background: #F0F2F5;
  --Shadebackground: rgba(240, 242, 245, 0.95);

  /* ── Text ── */
  --Text: #050505;
  --TextTwo: #6D6F73;

  /* ── Navigation & Layout ── */
  --Nav: #FFFFFF;
  --Section: #FFFFFF;
  --Frame: #F7F8FA;

  /* ── Icon ── */
  --Icon: #293040;
  --IconBackground: #E4E6EB;
  --IconBackgroundHover: #D8DADF;
  --IconHover: #2C2C2C;

  /* ── Button Primary ── */
  --Botton: #65B946;
  --BottonText: #65B946;
  --BottonHover: #51B22E;
  --BottonTextHover: #51B22E;

  /* ── Button Secondary ── */
  --BottonTwo: #FFFFFF;
  --BottonTwoText: #FFFFFF;
  --BottonTwoHover: #FFFFFF;
  --BottonTwoTextHover: #FFFFFF;

  /* ── Notification ── */
  --Notefication: #E91F63;
  --NewNotificationBG: #CEE2CD;

  /* ── Footer ── */
  --Footer: #75BA65;
  --FooterText: #F5F5F5;

  /* ── Status ── */
  --Error: #F04248;
  --Success: #00DF80;
  --Alert: #FFD21E;
  --NetStatus: #7DFF4C;

  /* ── Border ── */
  --Border: #E7E7E7;
  --BorderHover: #65B946;
  --BorderTwo: #FFFFFF;
  --BorderTwoHover: #FFFFFF;

  /* ── Shadow ── */
  --shadowBox: 0px 0px 4px rgba(0, 0, 0, 0.18);
  --shadowBoxTwo: 0px 0px 4px rgba(0, 0, 0, 0.18);
  --shadowBoxThree: 0px 0px 4px rgba(0, 0, 0, 0.18);
  --ShadowPage: rgba(0, 0, 0, 0.80);

  /* ── Radio ── */
  --Radio: #6D6F73;
  --RadioOn: #65B946;
  --RadioDisabled: #D4D4D6;
  --RadioBack: #D4D4D6;

  /* ── Social Auth - Apple ── */
  --Apple: #000000;
  --AppleBG: #000000;
  --AppleText: #FFFFFF;

  /* ── Social Auth - Facebook ── */
  --Facebook: #FFFFFF;
  --FacebookBG: #FFFFFF;
  --FacebookText: #FFFFFF;

  /* ── Social Auth - Google ── */
  --Google: #FFFFFF;
  --googleBG: #FFFFFF;
  --GoogleText: #FFFFFF;

  /* ── Social Media Colors ── */
  --facebook: #0866FF;
  --youtube: #FF0033;
  --Xicon: #FFFFFF;
  --xBackground: #000000;

  /* ── Selection ── */
  --FrameSelect: rgba(0, 129, 241, 0.10);
  --Select: #0081F1;
  --PreliminaryOpacity20: rgba(101, 185, 70, 0.20);

  /* ── Opacity ── */
  --Opacity20: rgba(255, 255, 255, 0.20);
  --Opacity50: rgba(255, 255, 255, 0.50);
  --OpacityBorder: rgba(0, 0, 0, 0.10);
}

/* ──────────────────────────────────────────────
   Dark Mode
   ────────────────────────────────────────────── */
[data-theme="dark"] {
  /* ── Primary ── */
  --Primary: #65B946;
  --PrimaryText: #FFFFFF;
  --PrimaryHover: #76D950;
  --PrimaryDisabled: #41503B;

  /* ── Disabled ── */
  --Disabled: #2F3031;
  --DisabledText: #717171;

  /* ── Background ── */
  --Background: #161718;
  --Shadebackground: rgba(22, 23, 24, 0.80);

  /* ── Text ── */
  --Text: #E4E6EB;
  --TextTwo: #B0B3B8;

  /* ── Navigation & Layout ── */
  --Nav: #242526;
  --Section: #242526;
  --Frame: #323436;

  /* ── Icon ── */
  --Icon: #E4E6EB;
  --IconBackground: #3A3B3C;
  --IconBackgroundHover: #4E4E4F;
  --IconHover: #DDDEDF;

  /* ── Button Primary ── */
  --Botton: #FFFFFF;
  --BottonText: #FFFFFF;
  --BottonHover: #76D950;
  --BottonTextHover: #76D950;

  /* ── Button Secondary ── */
  --BottonTwo: #FFFFFF;
  --BottonTwoText: #FFFFFF;
  --BottonTwoHover: #FFFFFF;
  --BottonTwoTextHover: #FFFFFF;

  /* ── Notification ── */
  --Notefication: #E41E3F;
  --NewNotificationBG: #313D2C;

  /* ── Footer ── */
  --Footer: #75BA65;
  --FooterText: #F5F5F5;

  /* ── Status ── */
  --Error: #F04248;
  --Success: #00DF80;
  --Alert: #FFD21E;
  --NetStatus: #7DFF4C;

  /* ── Border ── */
  --Border: #3E3E3E;
  --BorderHover: #65B946;
  --BorderTwo: #FFFFFF;
  --BorderTwoHover: #FFFFFF;

  /* ── Shadow ── */
  --shadowBox: 0px 0px 10px rgba(255, 255, 255, 0.25);
  --shadowBoxTwo: 0px 0px 4px rgba(0, 0, 0, 0.18);
  --shadowBoxThree: 0px 0px 4px rgba(0, 0, 0, 0.18);
  --ShadowPage: rgba(0, 0, 0, 0.80);

  /* ── Radio ── */
  --Radio: #B0B3B8;
  --RadioOn: #65B946;
  --RadioDisabled: #3E3E3F;
  --RadioBack: #3E3E3F;

  /* ── Social Auth - Apple ── */
  --Apple: #FFFFFF;
  --AppleBG: #FFFFFF;
  --AppleText: #FFFFFF;

  /* ── Social Auth - Facebook ── */
  --Facebook: #FFFFFF;
  --FacebookBG: #FFFFFF;
  --FacebookText: #FFFFFF;

  /* ── Social Auth - Google ── */
  --Google: #FFFFFF;
  --googleBG: #FFFFFF;
  --GoogleText: #FFFFFF;

  /* ── Social Media Colors ── */
  --facebook: #0866FF;
  --youtube: #FF0033;
  --Xicon: #000000;
  --xBackground: #FFFFFF;

  /* ── Selection ── */
  --FrameSelect: rgba(0, 129, 241, 0.10);
  --Select: #0081F1;
  --PreliminaryOpacity20: rgba(101, 185, 70, 0.20);

  /* ── Opacity ── */
  --Opacity20: rgba(0, 0, 0, 0.20);
  --Opacity50: rgba(255, 255, 255, 0.50);
  --OpacityBorder: rgba(255, 255, 255, 0.10);
}

/* ──────────────────────────────────────────────
   System Preference Auto-Detection
   Automatically switches to dark mode if user's
   OS is set to dark mode and no data-theme is set
   ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ── Primary ── */
    --Primary: #65B946;
    --PrimaryText: #FFFFFF;
    --PrimaryHover: #76D950;
    --PrimaryDisabled: #41503B;

    /* ── Disabled ── */
    --Disabled: #2F3031;
    --DisabledText: #717171;

    /* ── Background ── */
    --Background: #161718;
    --Shadebackground: rgba(22, 23, 24, 0.80);

    /* ── Text ── */
    --Text: #E4E6EB;
    --TextTwo: #B0B3B8;

    /* ── Navigation & Layout ── */
    --Nav: #242526;
    --Section: #242526;
    --Frame: #323436;

    /* ── Icon ── */
    --Icon: #E4E6EB;
    --IconBackground: #3A3B3C;
    --IconBackgroundHover: #4E4E4F;
    --IconHover: #DDDEDF;

    /* ── Button Primary ── */
    --Botton: #FFFFFF;
    --BottonText: #FFFFFF;
    --BottonHover: #76D950;
    --BottonTextHover: #76D950;

    /* ── Button Secondary ── */
    --BottonTwo: #FFFFFF;
    --BottonTwoText: #FFFFFF;
    --BottonTwoHover: #FFFFFF;
    --BottonTwoTextHover: #FFFFFF;

    /* ── Notification ── */
    --Notefication: #E41E3F;
    --NewNotificationBG: #313D2C;

    /* ── Footer ── */
    --Footer: #75BA65;
    --FooterText: #F5F5F5;

    /* ── Status ── */
    --Error: #F04248;
    --Success: #00DF80;
    --Alert: #FFD21E;
    --NetStatus: #7DFF4C;

    /* ── Border ── */
    --Border: #3E3E3E;
    --BorderHover: #65B946;
    --BorderTwo: #FFFFFF;
    --BorderTwoHover: #FFFFFF;

    /* ── Shadow ── */
    --shadowBox: 0px 0px 10px rgba(255, 255, 255, 0.25);
    --shadowBoxTwo: 0px 0px 4px rgba(0, 0, 0, 0.18);
    --shadowBoxThree: 0px 0px 4px rgba(0, 0, 0, 0.18);
    --ShadowPage: rgba(0, 0, 0, 0.80);

    /* ── Radio ── */
    --Radio: #B0B3B8;
    --RadioOn: #65B946;
    --RadioDisabled: #3E3E3F;
    --RadioBack: #3E3E3F;

    /* ── Social Auth - Apple ── */
    --Apple: #FFFFFF;
    --AppleBG: #FFFFFF;
    --AppleText: #FFFFFF;

    /* ── Social Auth - Facebook ── */
    --Facebook: #FFFFFF;
    --FacebookBG: #FFFFFF;
    --FacebookText: #FFFFFF;

    /* ── Social Auth - Google ── */
    --Google: #FFFFFF;
    --googleBG: #FFFFFF;
    --GoogleText: #FFFFFF;

    /* ── Social Media Colors ── */
    --facebook: #0866FF;
    --youtube: #FF0033;
    --Xicon: #000000;
    --xBackground: #FFFFFF;

    /* ── Selection ── */
    --FrameSelect: rgba(0, 129, 241, 0.10);
    --Select: #0081F1;
    --PreliminaryOpacity20: rgba(101, 185, 70, 0.20);

    /* ── Opacity ── */
    --Opacity20: rgba(0, 0, 0, 0.20);
    --Opacity50: rgba(255, 255, 255, 0.50);
    --OpacityBorder: rgba(255, 255, 255, 0.10);
  }
}