:root{
  --p-ink:#12222B;
  --p-paper:#FBFDFD;
  --p-white:#ffffff;
  --p-accent:#0E5E6B;
  --p-tint:#eff2f3;
  --p-hair:#e1e5e6;

  --c-surface:#FBFDFD;
  --c-surface-raised:#ffffff;
  --c-text:#12222b;
  --c-text-muted:#6c777c;
  --c-text-subtle:#6c767c;
  --c-border:#e1e5e6;
  --c-accent:#0E5E6B;
  --c-accent-hover:#2f747f;
  --c-on-accent:#ffffff;
  --c-on-accent-hover:#ffffff;
  --c-accent-text:#0e5e6b;
  --c-focus-ring:#0e5e6b;
}


[data-surface="inverse"]{
  --c-surface:#12222B;
  --c-surface-raised:#23313a;
  --c-text:#ffffff;
  --c-text-muted:#9ba2a6;
  --c-text-subtle:#848c91;
  --c-border:#46535a;
  --c-accent:#8bb2b8;
  --c-accent-hover:#7a9ea4;
  --c-on-accent:#12222B;
  --c-on-accent-hover:#030608;
  --c-accent-text:#599099;
  --c-focus-ring:#568e97;
}


[data-mode="dark"]{
  --c-surface:#12222B;
  --c-surface-raised:#23313a;
  --c-text:#ffffff;
  --c-text-muted:#9ba2a6;
  --c-text-subtle:#848c91;
  --c-border:#46535a;
  --c-accent:#8bb2b8;
  --c-accent-hover:#7a9ea4;
  --c-on-accent:#12222B;
  --c-on-accent-hover:#030608;
  --c-accent-text:#599099;
  --c-focus-ring:#568e97;
}
[data-mode="dark"] [data-surface="inverse"]{
  --c-surface:#FBFDFD;
  --c-surface-raised:#ffffff;
  --c-text:#12222b;
  --c-text-muted:#6c777c;
  --c-text-subtle:#6c767c;
  --c-border:#e1e5e6;
  --c-accent:#0E5E6B;
  --c-accent-hover:#2f747f;
  --c-on-accent:#ffffff;
  --c-on-accent-hover:#ffffff;
  --c-accent-text:#0e5e6b;
  --c-focus-ring:#0e5e6b;
}


@media (prefers-color-scheme: dark){
  [data-mode="auto"]{
    --c-surface:#12222B;
    --c-surface-raised:#23313a;
    --c-text:#ffffff;
    --c-text-muted:#9ba2a6;
    --c-text-subtle:#848c91;
    --c-border:#46535a;
    --c-accent:#8bb2b8;
    --c-accent-hover:#7a9ea4;
    --c-on-accent:#12222B;
    --c-on-accent-hover:#030608;
    --c-accent-text:#599099;
    --c-focus-ring:#568e97;
  }
  [data-mode="auto"] [data-surface="inverse"]{
    --c-surface:#FBFDFD;
    --c-surface-raised:#ffffff;
    --c-text:#12222b;
    --c-text-muted:#6c777c;
    --c-text-subtle:#6c767c;
    --c-border:#e1e5e6;
    --c-accent:#0E5E6B;
    --c-accent-hover:#2f747f;
    --c-on-accent:#ffffff;
    --c-on-accent-hover:#ffffff;
    --c-accent-text:#0e5e6b;
    --c-focus-ring:#0e5e6b;
  }
}