/* GENERATED by tool/design/generate_tokens.dart from design-system/tokens.json. Do not edit. */
:root {
  color-scheme: light dark;
  --font: 'Cairo', system-ui, sans-serif;
  --blue-300: #83C6F5;
  --blue-500: #0088C8;
  --blue-600: #0078B1;
  --blue-700: #006191;
  --yellow-400: #E8E020;
  --amber: #F5B800;
  --white: #FFFFFF;
  --black: #000000;
  --page: #F3F9FD;
  --panel: rgba(255, 255, 255, 0.78);
  --panel-strong: rgba(255, 255, 255, 0.961);
  --card: rgba(255, 255, 255, 0.949);
  --hairline: rgba(0, 55, 84, 0.122);
  --sheen: rgba(255, 255, 255, 0.702);
  --orb-blue: rgba(131, 198, 245, 0.251);
  --orb-blue-edge: rgba(131, 198, 245, 0);
  --orb-yellow: rgba(245, 241, 131, 0.302);
  --orb-yellow-edge: rgba(245, 241, 131, 0);
  --lines: rgba(0, 55, 84, 0.051);
  --text: #13222D;
  --muted: #5D6870;
  --action-ink: #0078B1;
  --link: #0078B1;
  --control-border: #7B858C;
  --field: #EFF8FF;
  --tile-from: #0078B1;
  --tile-to: #003754;
  --lines-on-brand: rgba(255, 255, 255, 0.161);
  --tile-glow: rgba(131, 198, 245, 0.251);
  --orb-blue-middle: rgba(131, 198, 245, 0.113);
  --orb-yellow-middle: rgba(245, 241, 131, 0.136);
  --fs-display-large: 2rem;
  --lh-display-large: 1.3;
  --fw-display-large: 700;
  --fs-display-medium: 1.6875rem;
  --lh-display-medium: 1.3;
  --fw-display-medium: 700;
  --fs-display-small: 1.375rem;
  --lh-display-small: 1.35;
  --fw-display-small: 700;
  --fs-headline-large: 1.5rem;
  --lh-headline-large: 1.35;
  --fw-headline-large: 700;
  --fs-headline-medium: 1.125rem;
  --lh-headline-medium: 1.4;
  --fw-headline-medium: 700;
  --fs-headline-small: 1rem;
  --lh-headline-small: 1.4;
  --fw-headline-small: 600;
  --fs-title-large: 0.9375rem;
  --lh-title-large: 1.4;
  --fw-title-large: 600;
  --fs-title-medium: 0.875rem;
  --lh-title-medium: 1.45;
  --fw-title-medium: 600;
  --fs-title-small: 0.875rem;
  --lh-title-small: 1.45;
  --fw-title-small: 600;
  --fs-body-large: 0.875rem;
  --lh-body-large: 1.6;
  --fw-body-large: 400;
  --fs-body-medium: 0.875rem;
  --lh-body-medium: 1.6;
  --fw-body-medium: 400;
  --fs-body-small: 0.75rem;
  --lh-body-small: 1.5;
  --fw-body-small: 400;
  --fs-label-large: 0.875rem;
  --lh-label-large: 1.4;
  --fw-label-large: 600;
  --fs-label-medium: 0.75rem;
  --lh-label-medium: 1.4;
  --fw-label-medium: 600;
  --fs-label-small: 0.75rem;
  --lh-label-small: 1.4;
  --fw-label-small: 600;
  --fs-num-hero: 2.8125rem;
  --lh-num-hero: 1.1;
  --fw-num-hero: 800;
  --fs-num-large: 2rem;
  --lh-num-large: 1.15;
  --fw-num-large: 800;
  --fs-num-medium: 1.3125rem;
  --lh-num-medium: 1.2;
  --fw-num-medium: 700;
  --fs-num-small: 0.875rem;
  --lh-num-small: 1.4;
  --fw-num-small: 600;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-glass: 1.5rem;
  --radius-clay: 1.125rem;
  --radius-pill: 999px;
  --fs-hero-name: clamp(2.125rem, 4.2vw, 3.625rem);
  --fs-heading: clamp(1.375rem, 3.2vw, 2.1875rem);
  --fs-lead: clamp(1rem, 2.1vw, 1.375rem);
  --content-max: 72rem;
  --reading-max: 56ch;
  --target: 3rem;
  --pill-height: 3rem;
  --pill-padding: 1.5rem;
  --input-height: 3rem;
  --input-padding: 1rem;
  --code-box-width: 3.25rem;
  --code-box-aspect: 1.25;
  --code-box-gap: 0.5rem;
  --chip-height: 2.5rem;
  --chip-padding: 0.5rem;
  --panel-padding: 1.5rem;
  --panel-padding-compact: 1.25rem;
  --panel-border: 1px;
  --panel-blur: 18px;
  --shield-small: 2rem;
  --shield-medium: 2.5rem;
  --shield-large: 6rem;
  --orb-min: 20rem;
  --orb-blue-x: 6%;
  --orb-blue-y: 92%;
  --orb-blue-share: 46vmax;
  --orb-yellow-x: 86%;
  --orb-yellow-y: 6%;
  --orb-yellow-share: 34vmax;
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 400ms;
  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #02101B;
    --panel: rgba(6, 25, 38, 0.761);
    --panel-strong: rgba(6, 25, 38, 0.941);
    --card: rgba(6, 25, 38, 0.839);
    --hairline: rgba(255, 255, 255, 0.102);
    --sheen: rgba(255, 255, 255, 0.071);
    --orb-blue: rgba(0, 136, 200, 0.302);
    --orb-blue-edge: rgba(0, 136, 200, 0);
    --orb-yellow: rgba(232, 224, 32, 0.18);
    --orb-yellow-edge: rgba(232, 224, 32, 0);
    --lines: rgba(255, 255, 255, 0.051);
    --text: #F3F9FD;
    --muted: #A4ACB2;
    --action-ink: #83C6F5;
    --link: #83C6F5;
    --control-border: #5F7584;
    --field: #0E2433;
    --tile-from: #035077;
    --tile-to: #061926;
    --lines-on-brand: rgba(255, 255, 255, 0.051);
    --tile-glow: rgba(0, 136, 200, 0.4);
    --orb-blue-middle: rgba(0, 136, 200, 0.136);
    --orb-yellow-middle: rgba(232, 224, 32, 0.081);
  }
}

/* A mouse on a wide window: the same step as the app's pointer density. */
@media (min-width: 840px) and (pointer: fine) {
  :root {
    --fs-title-small: 0.8125rem;
    --fs-body-large: 0.8125rem;
    --fs-body-medium: 0.8125rem;
    --fs-label-large: 0.8125rem;
    --fs-num-small: 0.8125rem;
    --space-1: 0.1875rem;
    --space-2: 0.375rem;
    --space-3: 0.625rem;
    --space-4: 0.8125rem;
    --space-5: 1rem;
    --space-6: 1.1875rem;
    --space-8: 1.625rem;
    --space-12: 2.375rem;
    --space-16: 3.1875rem;
    --target: 2.375rem;
    --pill-height: 2.375rem;
    --pill-padding: 1.1875rem;
    --input-height: 2.375rem;
    --input-padding: 0.8125rem;
    --code-box-width: 2.625rem;
    --code-box-gap: 0.375rem;
    --chip-height: 2rem;
    --panel-padding: 1.1875rem;
  }
}