/* Theme Variables for Backend Login Pages */
/* Only includes variables actually used in login/register templates */

/* Default MMH Theme - Light Mode */
:root {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-page: #f1f5f9; /* Brand.gki-grey.100 */

  /* Text Colors */
  --text-primary: #18181b; /* Extended.gray.900 */
  --text-secondary: #3f3f46; /* Extended.gray.700 */
  --text-tertiary: #71717a; /* Extended.gray.500 */
  --text-link: #096272; /* Brand.ketone-blue.700 */
  --text-link-hover: #053942; /* Brand.ketone-blue.800 */

  /* Button Colors */
  --btn-primary-bg: #10b3cf; /* Brand.ketone-blue.500 */
  --btn-primary-bg-hover: #096272; /* Brand.ketone-blue.700 */
  --btn-primary-text: #ffffff;

  /* Form Colors */
  --form-border: #d4d4d8; /* Extended.gray.300 */
  --form-border-focus: #10b3cf; /* Brand.ketone-blue.500 */
  --form-bg: #ffffff;
  --form-placeholder: #a1a1aa; /* Extended.gray.400 */

  /* Alert Colors */
  --alert-error-bg: #fee2e2; /* red.100 */
  --alert-error-text: #b91c1c; /* red.700 */
  --alert-error-border: #fecaca; /* red.200 */

  --alert-info-bg: #dbeafe; /* blue.100 */
  --alert-info-text: #1d4ed8; /* blue.700 */
  --alert-info-border: #bfdbfe; /* blue.200 */

  --alert-warning-bg: #ffedd5; /* orange.100 */
  --alert-warning-text: #c2410c; /* orange.700 */
  --alert-warning-border: #fed7aa; /* orange.200 */

  /* Icon Colors */
  --icon-color: #71717a; /* Extended.gray.500 */
}

/* MMH Theme - Dark Mode */
:root[data-theme='dark'] {
  /* Background Colors */
  --bg-primary: #000000;
  --bg-page: #27272a; /* Extended.gray.800 */

  /* Text Colors */
  --text-primary: #fafafa; /* Extended.gray.50 */
  --text-secondary: #e4e4e7; /* Extended.gray.200 */
  --text-tertiary: #a1a1aa; /* Extended.gray.400 */
  --text-link: #55dbf2; /* Brand.ketone-blue.400 */
  --text-link-hover: #b3eff9; /* Brand.ketone-blue.300 */

  /* Button Colors */
  --btn-primary-bg: #10b3cf; /* Brand.ketone-blue.500 */
  --btn-primary-bg-hover: #55dbf2; /* Brand.ketone-blue.400 */
  --btn-primary-text: #04292f; /* Brand.ketone-blue.900 */

  /* Form Colors */
  --form-border: #52525b; /* Extended.gray.600 */
  --form-border-focus: #55dbf2; /* Brand.ketone-blue.400 */
  --form-bg: #000000;
  --form-placeholder: #71717a; /* Extended.gray.500 */

  /* Alert Colors */
  --alert-error-bg: #991b1b; /* red.800 */
  --alert-error-text: #fecaca; /* red.200 */
  --alert-error-border: #dc2626; /* red.600 */

  --alert-info-bg: #1e40af; /* blue.800 */
  --alert-info-text: #bfdbfe; /* blue.200 */
  --alert-info-border: #2563eb; /* blue.600 */

  --alert-warning-bg: #9a3412; /* orange.800 */
  --alert-warning-text: #fed7aa; /* orange.200 */
  --alert-warning-border: #ea580c; /* orange.600 */

  /* Icon Colors */
  --icon-color: #a1a1aa; /* Extended.gray.400 */
}

/* MPL Theme - Light Mode */
:root[data-theme='mpl-light'] {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-page: #f6f5f3; /* Brand.glucose-brown.100 */

  /* Text Colors */
  --text-primary: #161616; /* MPL-Grey.900 */
  --text-secondary: #434343; /* MPL-Grey.700 */
  --text-tertiary: #707070; /* MPL-Grey.600 */
  --text-link: #3c342c; /* MPL-Brown.700 */
  --text-link-hover: #1a1613; /* MPL-Brown.900 */

  /* Button Colors */
  --btn-primary-bg: #b1bf41; /* MPL-Green.500 */
  --btn-primary-bg-hover: #8e9934; /* MPL-Green.600 */
  --btn-primary-text: #282b0f; /* MPL-Green.900 */

  /* Form Colors */
  --form-border: #c6c6c6; /* MPL-Grey.300 */
  --form-border-focus: #b1bf41; /* MPL-Green.500 */
  --form-bg: #ffffff;
  --form-placeholder: #8d8d8d; /* MPL-Grey.500 */

  /* Alert Colors */
  --alert-error-bg: #ffc9ca; /* Semantic.MPL-Red.100 */
  --alert-error-text: #660c0e; /* Semantic.MPL-Red.800 */
  --alert-error-border: #ffa5a7; /* Semantic.MPL-Red.200 */

  --alert-info-bg: #cddaf9; /* Semantic.MPL-Blue.100 */
  --alert-info-text: #12285c; /* Semantic.MPL-Blue.800 */
  --alert-info-border: #abc1f5; /* Semantic.MPL-Blue.200 */

  --alert-warning-bg: #fce1c9; /* Semantic.MPL-Orange.100 */
  --alert-warning-text: #61350c; /* Semantic.MPL-Orange.800 */
  --alert-warning-border: #facea5; /* Semantic.MPL-Orange.200 */

  /* Icon Colors */
  --icon-color: #707070; /* MPL-Grey.600 */
}

/* MPL Theme - Dark Mode */
:root[data-theme='mpl-dark'] {
  /* Background Colors */
  --bg-primary: #000000;
  --bg-page: #28231f; /* Brand.glucose-brown.800 */

  /* Text Colors */
  --text-primary: #f1f1f1; /* MPL-Grey.50 */
  --text-secondary: #d4d4d4; /* MPL-Grey.200 */
  --text-tertiary: #a9a9a9; /* MPL-Grey.400 */
  --text-link: #d0d98d; /* MPL-Green.300 */
  --text-link-hover: #e0e5b3; /* MPL-Green.200 */

  /* Button Colors */
  --btn-primary-bg: #b1bf41; /* MPL-Green.500 */
  --btn-primary-bg-hover: #c1cc67; /* MPL-Green.400 */
  --btn-primary-text: #282b0f; /* MPL-Green.900 */

  /* Form Colors */
  --form-border: #8d8d8d; /* MPL-Grey.500 */
  --form-border-focus: #d0d98d; /* MPL-Green.300 */
  --form-bg: #000000;
  --form-placeholder: #707070; /* MPL-Grey.600 */

  /* Alert Colors */
  --alert-error-bg: #cc191b; /* Semantic.MPL-Red.600 */
  --alert-error-text: #ffc9ca; /* Semantic.MPL-Red.100 */
  --alert-error-border: #ff1f22; /* Semantic.MPL-Red.500 */

  --alert-info-bg: #1c3d8a; /* Semantic.MPL-Blue.700 */
  --alert-info-text: #cddaf9; /* Semantic.MPL-Blue.100 */
  --alert-info-border: #2551b8; /* Semantic.MPL-Blue.600 */

  --alert-warning-bg: #c26a17; /* Semantic.MPL-Orange.600 */
  --alert-warning-text: #fce1c9; /* Semantic.MPL-Orange.100 */
  --alert-warning-border: #f2841d; /* Semantic.MPL-Orange.500 */

  /* Icon Colors */
  --icon-color: #a9a9a9; /* MPL-Grey.400 */
}