/* Gas Check landing page: design tokens.
   Hand-extracted from the generated design system under _ds, only the
   roles this page actually uses. See docs/adr/0003-flat-tokens-css-not-full-design-system.md */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0&display=swap');

:root{
  --font-sans:'Roboto','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,monospace;
  --font-icons:'Material Symbols Outlined';

  --primary:#036D37;
  --on-primary:#FFFFFF;
  --on-primary-container:#002209;

  --surface-app:#F4FBF5;
  --surface-card:#FFFFFF;
  --surface-sunken:#DDE4DE;
  --surface-container-high:#E2EAE4;
  --surface-container-highest:#DDE4DE;

  --text-body:#181D19;
  --text-muted:#3E4A40;

  --outline:#6D7A70;
  --border-hairline:#BCCABF;

  --elevation-1:0 1px 2px rgba(0,0,0,.30),0 1px 3px 1px rgba(0,0,0,.15);
}

@media (prefers-color-scheme: dark){
  :root{
    --primary:#7DDA99;
    --on-primary:#003919;
    --on-primary-container:#99F7B4;

    --surface-app:#0F150F;
    --surface-card:#0A0F0A;
    --surface-sunken:#313732;
    --surface-container-high:#262B27;
    --surface-container-highest:#313732;

    --text-body:#DDE4DE;
    --text-muted:#BCCABF;

    --outline:#879489;
    --border-hairline:#3E4A40;
  }
}