/* The Airy respondent theme (config/themes.php): its values, from the operator's target
   (docs/new-theme-candidates-2026-10-09.html, Airy). Linked by layouts/participant only on a screen in reach of a
   session whose design is airy (ThemeService::links). Shapes are the variants in its registry entry. */
:root:is([data-theme="airy"],[data-theme="ws-airy"]){
  --page-bg:#D8EBF8;
  --card-border-width:1px;
  --card-border:#FFFFFFF2;
  --ink:#0F1B2D;
  --ink-rgb:15, 27, 45;
  --kicker-ink:#245A93;
  --font-heading:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --font-label:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --kicker-case:none;
  --title-case:none;
}
:root[data-theme="airy"]{
  --card-bg:#FFFFFFA8;
  --card-shadow:0 20px 48px rgba(40,90,140,.08);
  --radius-card:32px;
  --radius-tile:28px;
  --radius-choice:16px;
  --header-align:left;
  --color-text-secondary:#4A5B70;
  --color-text-tertiary:#4A5B70;
  --title-ink:#0F1B2D;
  --question-ink:#33445A;
  --font-body:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --font-kicker:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --type-kicker:14px;
  --kicker-weight:500;
  --kicker-tracking:.01em;
  --type-title:clamp(36px, 6vw, 60px);
  --title-weight:600;
  --title-tracking:-.04em;
  --type-question:21px;
  --font-button:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --type-button:16px;
  --button-weight:600;
  --button-pad:15px 38px;
  --button-case:none;
  --button-tracking:0;
  --radius-control:999px;
  --action-fill:#0F1B2D;
  --on-action:#fff;
  --button-shadow:none;
  --button-edge:0;
  --button-outline-edge:1px solid rgba(15,27,45,.08);
  --button-outline-ink:#0F1B2D;
  --button-outline-fill:#FFFFFFE6;
  --selected-fill:#0F1B2D;
  --on-selected:#fff;
  --selected-edge:#0F1B2D;
  --selected-ring:inset 0 0 0 1px #0F1B2D;
  --scale-selected-ring:0 10px 22px rgba(15,27,45,.22);
  --numeral-ink:#0F1B2D;
  --total-ink:#0F1B2D;
  --surface-field:#fff;
  --surface-choice:#fff;
  --surface-choice-hover:#F4F9FD;
  --selected-wash:#EEF5FB;
  --choice-hover-wash:#F4F9FD;
  --choice-hover-edge:#0F1B2D;
  --field-edge:#7297C1;
  --border-strong:#7297C1;
  --choice-edge:#7297C1;
  --field-edge-width:1px;
  --field-ink:#0F1B2D;
  --radius-entry:16px;
  --scale-point-size:64px;
  --scale-point-border:1px;
  --scale-point-edge:#DDE6F0;
  --scale-point-fill:#fff;
  --radius-scale:999px;
  --scale-point-hover:#F4F9FD;
  --scale-gap:12px;
  --scale-point-ink:#0F1B2D;
  --font-numeral:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --type-scale-point:20px;
  --scale-point-weight:600;
  --font-ends:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --type-ends:15px;
  --ends-ink:#4A5B70;
  --ends-case:none;
  --ends-tracking:0;
  --progress-current:#0F1B2D;
  --progress-todo:#0F1B2D17;
  --progress-height:4px;
  --progress-radius:999px;
  --progress-width:280px;
  --type-progress-label:13px;
  --progress-label-case:none;
  --progress-label-tracking:0;
  --progress-label-ink:#4A5B70;
  --message-ink:#9E2F12;
}
/* What it draws beyond its colours (docs/new-theme-candidates-2026-10-09.html, Airy), as the role tokens the shared
   components read: the sky, the frosted glass, the titles on the sky rather than on a card. */
:root[data-theme="airy"]{
  --page-ground:linear-gradient(180deg,#B9D9F2 0%,#D8EBF8 40%,#F4F9FD 100%) no-repeat;
  --card-backdrop:blur(18px);
  --header-ground:transparent;
  --header-ground-edge:var(--card-border-width) solid transparent;
  --header-ground-shadow:none;
  --header-ground-backdrop:none;
  --compare-card-fill:#FFFFFFB8;
  --compare-card-edge-width:1px;
  --compare-card-edge-color:#FFFFFFF2;
  --compare-card-shadow:0 16px 36px rgba(40,90,140,.07);
  --compare-card-backdrop:blur(18px);
  --compare-card-chosen-fill:#0F1B2D;
  --compare-card-chosen-edge:#0F1B2D;
  --block-backdrop:blur(18px);
}

/* Its results roles (public/css/tokens.css, THE RESULTS ROLE LAYER), from the same target's Results page.
   Reach a results screen through @section('results-themed'). */
:root[data-theme="airy"]{
  --result-panel:#FFFFFFB3;
  --result-cell:#fff;
  --result-band:#0F1B2D;
  --result-band-2:color-mix(in srgb, #0F1B2D 85%, #fff);
  --on-result-band:#fff;
  --on-result-band-faint:color-mix(in srgb, #fff 70%, #0F1B2D);
  --on-result-band-edge:color-mix(in srgb, #fff 45%, #0F1B2D);
  --result-emphasis:#2F6FB0;
  --on-result-emphasis:#fff;
  --result-kicker:#2F6FB0;
  --result-on-ground:var(--result-ground-ink);
  --result-muted:#5A6B80;
  --result-faint:color-mix(in srgb, #5A6B80 60%, #fff);
  --result-rule:#E6ECF2;
  --result-panel-border:1px solid #FFFFFFF2;
  --result-panel-edge:#FFFFFFF2;
  --result-panel-shadow:0 20px 48px rgba(40,90,140,.08);
  --result-panel-divider:1px solid #E6ECF2;
  --result-row-rule:#E6ECF2;
  --result-panel-clip:clip;
  --result-cloud-ground:#fff;
  --result-capture-ground:#F4F9FD;
  --result-board-ground:#fff;
  --result-action-fill:#fff;
  --result-action-ink:#0F1B2D;
  --result-action-edge:inset 0 0 0 1px #DDE6F0;
  --result-control-off:#C9D3DE;
  --result-subheader-gap:6px;
  --result-name-wrap:anywhere;
  --radius-result-panel:28px;
  --page-image-radius:32px;
  --page-image-cap:420px;
  --page-image-cap-phone:220px;
  --page-image-banner:3 / 1;
  --radius-result-cell:20px;
  --radius-result-action:999px;
  --share-ground:#F4F9FD;
  --share-row:#fff;
  --share-ink:#0F1B2D;
  --share-muted:#5A6B80;
  --share-lead:#2F6FB0;
  --export-ground:#F4F9FD;
  --export-panel:#fff;
  --export-ink:#0F1B2D;
  --export-caption:#5A6B80;
  --export-accent:#2F6FB0;
  --export-accent-strong:#2F6FB0;
  --font-result-heading:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --font-result-body:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --font-result-label:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --font-result-ui:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
  --font-result-figure:'Hanken Grotesk', var(--brand-font-fallback, sans-serif), sans-serif;
}