/* Tokens only. DESIGN.md's frontmatter is the source. */

:root {
  --color-primary: #FF6B2C;

  --color-background: #FAFAF9;
  --color-surface: #FFFFFF;

  --color-foreground: #0E1013;
  --color-muted: #3D424B;
  --color-subtle: #5F646D;

  --color-border: #ECEDF0;
  --color-hairline: #EEEFF2;
  --color-edge: #C4C9D2;

  --color-cta: #0E1013;
  --color-cta-hover: #2A2D33;
  --color-on-cta: #FFFFFF;

  --color-brand: #FF6B2C;
  --color-brand-text: #E2550A;
  --color-brand-on-dark: #FF8A57;

  --color-signal-message: #3A5BFF;
  --color-signal-reservation: #0E1013;
  --color-signal-loyalty: #FF6B2C;
  --color-signal-campaign: #17A35F;

  --color-orb-orange: #FF7A3D;
  --color-orb-blue: #7F95FF;
  --color-orb-pink: #FF8FC0;
  --color-orb-yellow: #FFC94D;
  --color-orb-green: #4CCB8A;

  --color-tint-blue: #EAEEFF;
  --color-tint-blue-ink: #2F4BE0;
  --color-tint-orange: #FFEEE5;
  --color-tint-orange-ink: #B03C08;
  --color-tint-green: #E4F5EC;
  --color-tint-green-ink: #0A7243;
  --color-tint-pink: #FFE8F2;
  --color-tint-pink-ink: #C2186B;
  --color-tint-yellow: #FFF3D3;
  --color-tint-yellow-ink: #8A6100;
  --color-tint-ink: #EEEFF2;

  --color-glass: #FFFFFF80;
  --color-glass-dark: #0E1013E0;

  --font-display: 'Sora', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Martian Mono', ui-monospace, Menlo, monospace;

  /* Phone sizes. The 761px block raises them. */
  --fs-display: 36px;
  --fs-heading: 30px;
  --fs-figure: 64px;
  --fs-title: 17px;
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-label: 11px;
  --fs-wordmark: 17px;
  --fs-switch: 13px;

  --lh-display: 1;
  --lh-heading: 1.02;
  --lh-figure: 1;
  --lh-title: 1.3;
  --lh-lead: 1.55;
  --lh-body: 1.55;
  --lh-small: 1.2;
  --lh-label: 1.2;
  --lh-wordmark: 1;
  --lh-switch: 1.2;

  --fw-display: 600;
  --fw-heading: 600;
  --fw-figure: 600;
  --fw-title: 700;
  --fw-lead: 400;
  --fw-body: 400;
  --fw-small: 600;
  --fw-label: 500;
  --fw-wordmark: 700;
  --fw-switch: 600;

  --ls-display: -0.055em;
  --ls-heading: -0.05em;
  --ls-figure: -0.05em;
  --ls-title: normal;
  --ls-lead: normal;
  --ls-body: normal;
  --ls-small: normal;
  --ls-label: 0.08em;
  --ls-wordmark: -0.05em;
  --ls-switch: normal;

  --radius-tile: 12px;
  --radius-card: 24px;
  --radius-panel: 36px;
  --radius-pill: 9999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-section: 64px;
  --space-section-desktop: 96px;

  --content-max: 1200px;
  --gutter: 24px;
  --section-y: var(--space-section);

  --glass-blur: 24px;
  --glass-saturate: 150%;
  --glass-edge: linear-gradient(rgb(255 255 255 / 90%), rgb(255 255 255 / 20%));
  --glass-edge-dark: linear-gradient(rgb(255 255 255 / 18%), rgb(255 255 255 / 4%));
  --shadow-drop: 0 12px 32px color-mix(in srgb, var(--color-foreground) 8%, transparent);
  --shadow-thumb: 0 1px 2px color-mix(in srgb, var(--color-foreground) 10%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--color-foreground) 20%, transparent);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
}

@media (min-width: 761px) {
  :root {
    --fs-display: 108px;
    --fs-heading: 68px;
    --fs-figure: 100px;
    --fs-title: 19px;
    --fs-lead: 20px;
    --fs-body: 16px;
    --fs-small: 15px;
    --fs-label: 12px;
    --fs-wordmark: 20px;
    --fs-switch: 14px;
    --gutter: 32px;
    --section-y: var(--space-section-desktop);
  }
}