:root {
  color-scheme: light;
  --body:#ffffff;
  --surface-0: #f9f9f7;
  --surface-1: #ffffff;
  /* --surface-2: #f3f3f0; */
  --surface-2:#f8f8f8;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-secondary-white: #52514e;
  --text-muted: #717378;
  --text-black-white:#000000;
  /* --hairline: #e1e0d9; */
  --hairline:#e6e6e6;
  /* --hairline:#dedede; */
  --header-link:var(--gray800);
  --border: rgba(11, 11, 11, 0.1);
  --brand-blue: #14355e;
  --brand-orange: #eb6834;
  --success:#0ca30c;
  --success-bg: #eaf7ea;
  
  --warning: #ecb91e;
  --warning-bg: #fdf3e0;
  --danger: #ff0000;
  --danger-bg: #fbe9e9;
  --outage: #ff0000;
  --outage-bg: #fbe9e9;
  --partial-outage: #f65f24;
  --partial-outage-bg: #fbefe9;
  --info: #056ae5;
  --info-bg: #e9f1fc;
  --maintenance: #0040b8;
  --maintenance-bg: #e9f1fc;

  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 16px rgba(11, 11, 11, 0.06);
  --radius: 12px;

  --gray100: #f9f9f9;
  --gray200:#f3f3f4;
  --gray300: #dbdfe9;
  --gray400: #c4cada;
  --gray500: #99a1b7;
  --gray600: #78829d;
  --gray700: #4b5675;
  --gray800: #252f4a;
  --gray900: #071437;
  --light: #f9f9f9;
  --dark: #1e2129;
  --ns: #02102b;

    --header:var(--gray200);

}
/* matches the attribute regardless of whether it's set on <html> or <body> -
   your header.php sets it on <body>, so :root[data-theme] alone would never fire */
[data-theme="dark"] {
  color-scheme: dark;
  --body:#0d0d0d;
  --surface-0: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --text-primary: #ffffff;
  --text-secondary: #d9d8cf;
  --text-secondary-white: #ffffff;
  --text-muted: #a7a9ac;
  --text-black-white:#ffffff;
  --hairline: #2c2c2a;
  --header-link: #d9d8cf;
  --border: rgba(255, 255, 255, 0.1);
  --brand-blue: #6f9bd6;
  --brand-orange: #eb6834;
  --success: #0ca30c;
  --success-bg: #0d3b2392;
  --warning: #f5cc60;
  --warning-bg: #3d2e0091;
  --danger: #f06f79;
  --danger-bg: #4a0e128a;
  --outage: #f06f79;
  --outage-bg: #4a0e128a;
  --partial-outage: #fa7917;
  --partial-outage-bg: #fa79173a;
  --info: #79abf5;
  --info-bg: #1a3a6eca;

  --maintenance: #488df5;
  --maintenance-bg: #1a3a6eca;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.4);

  --gray100: #4b5675;
  --gray200:#78829d;
  --gray300: #78829d;
  --gray400: #99a1b7;
  --gray500: #c4cada;
  --gray600: #dbdfe9;
  --gray700: #4b5675;
  --gray800: #f3f3f4;
  --gray900: #071437;
  --light: #f9f9f9;
  --dark: #1e2129;
  --ns: #02102b;

    --header:var(--surface-1);

}