/* Glass style tokens: glass's four schemes, type and shape. The colours are
   content/schemes/*.json of examples/astro/glass. */

:root,
[data-gs-scheme="base"] {
  --gs-bg: #eef2f7;
  --gs-surface: #fbfcfe;
  --gs-text: #0d1526;
  --gs-muted: #4a566b;
  --gs-accent: #2f55d4;
  --gs-button-bg: #0d1526;
  --gs-button-text: #ffffff;
  --gs-border: #c7d1de;
}
[data-gs-scheme="soft"] {
  --gs-bg: #e2e9f4;
  --gs-surface: #f4f7fc;
  --gs-text: #0d1526;
  --gs-muted: #435066;
  --gs-accent: #2f55d4;
  --gs-button-bg: #2f55d4;
  --gs-button-text: #ffffff;
  --gs-border: #bcc8d9;
}
[data-gs-scheme="inverse"] {
  --gs-bg: #0a1020;
  --gs-surface: #141c30;
  --gs-text: #eef2f8;
  --gs-muted: #a5b0c4;
  --gs-accent: #8eaeff;
  --gs-button-bg: #eef2f8;
  --gs-button-text: #0a1020;
  --gs-border: #2c3752;
}
[data-gs-scheme="cobalt"] {
  --gs-bg: #1b3290;
  --gs-surface: #233ca3;
  --gs-text: #ffffff;
  --gs-muted: #d5ddf6;
  --gs-accent: #ffd27a;
  --gs-button-bg: #ffffff;
  --gs-button-text: #1b3290;
  --gs-border: #4b62bd;
}

/* Glass surfaces: light panes on the light schemes, faint ones on the dark. */
:root,
[data-gs-scheme] {
  --gs-glass-fill: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.72),
    rgb(255 255 255 / 0.46)
  );
  --gs-glass-hi: rgb(255 255 255 / 0.9);
  --gs-glass-lo: color-mix(in srgb, var(--gs-text) 10%, transparent);
  --gs-glass-shadow: color-mix(in srgb, var(--gs-text) 22%, transparent);
  --gs-glass-sheen: 0.7;
  --gs-prism-a: color-mix(in srgb, var(--gs-accent) 18%, transparent);
  --gs-prism-b: rgb(160 120 255 / 0.14);
  --gs-prism-c: rgb(255 190 110 / 0.16);
}
[data-gs-scheme="inverse"],
[data-gs-scheme="cobalt"] {
  --gs-glass-fill: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.13),
    rgb(255 255 255 / 0.05)
  );
  --gs-glass-hi: rgb(255 255 255 / 0.35);
  --gs-glass-lo: rgb(0 0 0 / 0.35);
  --gs-glass-shadow: rgb(0 0 0 / 0.5);
  --gs-glass-sheen: 0.28;
  --gs-prism-a: rgb(120 160 255 / 0.3);
  --gs-prism-b: rgb(200 120 255 / 0.2);
  --gs-prism-c: rgb(255 170 120 / 0.14);
}

:root {
  --gs-glass-blur: blur(22px) saturate(180%);
  --gs-glass-rim: linear-gradient(
    120deg,
    rgb(255 255 255 / 0.95),
    rgb(160 190 255 / 0.55) 30%,
    rgb(255 190 230 / 0.45) 55%,
    rgb(255 225 160 / 0.5) 75%,
    rgb(255 255 255 / 0.9)
  );

  --gs-font-heading: "Unbounded", Georgia, serif;
  --gs-font-body: "Commissioner", system-ui, sans-serif;
  /* Base 16px, ratio 1.25. */
  --gs-step--1: 0.8rem;
  --gs-step-0: 1rem;
  --gs-step-1: 1.25rem;
  --gs-step-2: 1.5625rem;
  --gs-step-3: 1.953rem;
  --gs-step-4: 2.441rem;
  --gs-step-5: 3.052rem;

  --gs-radius-pill: 999px;
  --gs-radius-card: 1.75rem;
  --gs-radius-input: 1rem;

  --gs-space-section: 4rem;
  --gs-space-block: 1.75rem;
  --gs-width-narrow: 44rem;
  --gs-width-normal: 1180px;
  --gs-width-wide: 90rem;
  --gs-header-height: 4.5rem;
}
@media (min-width: 750px) {
  :root {
    --gs-space-section: 6.5rem;
    --gs-header-height: 5.5rem;
  }
}