/* Generated from DESIGN.md. Edit its canonical token block, then run tools/sync_tokens.py. */
:root {
  --white:#ffffff;
  /* neutral: sea slate. 50 is the misty page; 900 the deep-sea ink. */
  --neutral-50:#f2f5f4;
  --neutral-100:#e7eded;
  --neutral-200:#dbe3e4;
  --neutral-300:#c2cdcf;
  --neutral-400:#99a8ab;
  --neutral-500:#6d7e82;
  --neutral-600:#4d5e62;
  --neutral-700:#34484a;
  --neutral-800:#1d2c30;
  --neutral-900:#0d1a1e;
  --neutral-950:#071114;
  /* brand-primary: logo sky blue. 300–400 fill the one primary action (with ink text); 700 is readable brand text. */
  --brand-primary-50:#eef7fe;
  --brand-primary-100:#d9eefc;
  --brand-primary-200:#b5ddf9;
  --brand-primary-300:#86c8f6;
  --brand-primary-400:#5db4f2;
  --brand-primary-500:#2f97e0;
  --brand-primary-600:#147cc4;
  --brand-primary-700:#0b6299;
  --brand-primary-800:#084d78;
  --brand-primary-900:#063a5a;
  --brand-primary-950:#04263b;
  /* brand-sun: Caribbean sun yellow, a second brand palette for offers and savings only. Never a status meaning. */
  --brand-sun-50:#fff6dc; --brand-sun-100:#ffeab0; --brand-sun-600:#b07800; --brand-sun-700:#7a5300; --brand-sun-800:#5e3f00;
  /* Status colors are independent of the brand palette. */
  --status-success-light:#1f6b3a; --status-success-light-bg:#e5f3e9; --status-success-light-border:#b9dcc4;
  --status-success-dark:#93d6a9; --status-success-dark-bg:#132a1d; --status-success-dark-border:#2b5a3c;
  --status-danger-light:#b3261e; --status-danger-light-bg:#fdefee; --status-danger-light-border:#f3c9c5;
  --status-danger-dark:#ffaea5; --status-danger-dark-bg:#3a1714; --status-danger-dark-border:#6e2e28;
  --status-warning-light:#8a5300; --status-warning-light-bg:#fdf4e3; --status-warning-light-border:#edd3a1;
  --status-warning-dark:#f0c987; --status-warning-dark-bg:#2e2210; --status-warning-dark-border:#6b5220;
  --status-info-light:#0b6299; --status-info-light-bg:#eaf4fc; --status-info-light-border:#c4e0f6;
  --status-info-dark:#a6d3f7; --status-info-dark-bg:#0d2536; --status-info-dark-border:#24506f;
  /* Semantic roles. bg is the misty page; bg-surface the white cards; bg-subtle fills fields and options inside cards. */
  --bg:var(--neutral-50); --bg-surface:var(--white); --bg-subtle:var(--neutral-50); --bg-muted:var(--neutral-100); --bg-inverse:var(--neutral-900);
  --fg:var(--neutral-900); --fg-secondary:var(--neutral-700); --fg-muted:var(--neutral-600);
  --fg-placeholder:var(--neutral-600); --fg-disabled:var(--neutral-500); --fg-inverse:var(--white);
  --border:var(--neutral-200); --border-strong:var(--neutral-500);
  --border-control:color-mix(in srgb,var(--border-strong) 55%,var(--border)); /* inputs, option cards and lists on white */
  --brand-primary:var(--brand-primary-400);
  --brand-primary-hover:var(--brand-primary-300);
  --brand-primary-pressed:var(--brand-primary-500);
  --brand-primary-on:var(--neutral-950);
  --brand-primary-subtle:var(--brand-primary-50);
  --brand-primary-muted:var(--brand-primary-100);
  --brand-primary-text:var(--brand-primary-700);
  --brand-primary-border:var(--brand-primary-600);
  --fg-brand-primary:var(--brand-primary-text);
  --accent:var(--brand-primary); --accent-hover:var(--brand-primary-hover); --accent-pressed:var(--brand-primary-pressed);
  --accent-fg:var(--brand-primary-on); --accent-subtle:var(--brand-primary-subtle);
  --promo-bg:var(--brand-sun-50); --promo-fg:var(--brand-sun-700); --promo-icon-bg:var(--brand-sun-100); --promo-icon:var(--brand-sun-600); /* icon circle a step deeper than promo-bg, dark yellow icon (3.3:1) */
  --danger:var(--status-danger-light); --danger-bg:var(--status-danger-light-bg); --danger-border:var(--status-danger-light-border);
  --success:var(--status-success-light); --success-bg:var(--status-success-light-bg); --success-border:var(--status-success-light-border);
  --warning:var(--status-warning-light); --warning-bg:var(--status-warning-light-bg); --warning-border:var(--status-warning-light-border);
  --info:var(--status-info-light); --info-bg:var(--status-info-light-bg); --info-border:var(--status-info-light-border);
  --focus:var(--brand-primary-600); --focus-ring:#147cc452; --scrim:#0711148a;
  /* Checked controls: a deeper logo blue so the white tick and dot read at 3:1 or better. */
  --control-checked:var(--brand-primary-600); --control-checked-hover:var(--brand-primary-700); --control-checked-on:var(--white); --control-border:var(--neutral-500);
  /* Duotone icon fill: a vivid logo sky behind the deep-blue outline (decorative). */
  --icon-duotone:var(--brand-primary-200);
  /* The floating action bar: a dark rounded slab in both themes. */
  --bar-bg:var(--neutral-900); --bar-fg:var(--white); --bar-muted:#b6c4c7;
  /* Photo overlay: a deep-sea gradient that keeps white type readable over imagery. */
  --photo-shade:#071114; --photo-fg:var(--white);
  /* Map art (illustrative route maps on the trip page). */
  --map-sea:#d9eefc; --map-land:#eef3ea; --map-route:var(--brand-primary-600); --map-route-done:var(--neutral-500); --map-pin:var(--neutral-900); --map-label:var(--neutral-900);
  --font-body:'Albert Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:ui-monospace,monospace;
  /* Product ramp 56/40/28/22/18/16/15/13/12; 4xl and above are display sizes for the review hub only. */
  --text-xs:.75rem; --text-sm:.8125rem; --text-ui:.9375rem; --text-md:1rem;
  --text-body-lg:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem;
  --text-2xl:2.5rem; --text-3xl:3.5rem; --text-4xl:4rem;
  --text-5xl:4.5rem; --text-6xl:5rem; --text-7xl:6rem; --text-8xl:7rem;
  --line-height-tight:1.05; --line-height-snug:1.15; --line-height-heading:1.25;
  --line-height-compact:1.3333; --line-height-normal:1.45; --line-height-relaxed:1.6;
  --line-height:var(--line-height-normal); --letter-spacing:0; --letter-spacing-tight:-.03em; --letter-spacing-snug:-.015em; --letter-spacing-wide:.08em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --space-1:.25rem; --space-1-5:.375rem; --space-2:.5rem; --space-2-5:.625rem; --space-3:.75rem; --space-3-5:.875rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-14:3.5rem; --space-16:4rem; --space-20:5rem;
  --radius-xs:.375rem; --radius-sm:.75rem; --radius-md:1rem; --radius-lg:1.25rem; --radius-xl:1.75rem; --radius-2xl:2rem; --radius-full:999px;
  --border-width:1px; --border-width-control:1.5px; --border-width-strong:2px; --focus-width:3px; --focus-offset:2px;
  --shadow-sm:0 1px 2px #0d1a1e14; --shadow-md:0 6px 20px #0d1a1e14; --shadow-lg:0 16px 40px #0d1a1e2e; --shadow-sheet:0 -12px 40px #0d1a1e24;
  --control-sm:2.25rem; --control-md:2.75rem; --control-lg:3.25rem; --control-xl:3.5rem; --touch-target:2.75rem;
  --indicator:1.375rem; --stepper:2.75rem;
  --content-sm:28rem; --content-md:42rem; --content-lg:72rem;
  --motion-fast:150ms; --motion-normal:250ms; --motion-slow:420ms; --motion-emphasis:600ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --layer-sticky:10; --layer-overlay:30; --nav-height:4.5rem; --header-height:3.5rem;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#070f12; --bg-surface:#111b1f; --bg-subtle:#18252a; --bg-muted:#213238; --bg-inverse:var(--neutral-50);
  --fg:#f1f5f5; --fg-secondary:#c8d3d5; --fg-muted:#9aabaf;
  --fg-placeholder:#9aabaf; --fg-disabled:#6d7e82; --fg-inverse:var(--neutral-900);
  --border:#24343a; --border-strong:#6d7e82;
  --brand-primary:var(--brand-primary-400);
  --brand-primary-hover:var(--brand-primary-300);
  --brand-primary-pressed:var(--brand-primary-200);
  --brand-primary-on:var(--neutral-950);
  --brand-primary-subtle:#0c2232;
  --brand-primary-muted:#123247;
  --brand-primary-text:var(--brand-primary-300);
  --brand-primary-border:var(--brand-primary-400);
  --promo-bg:#2a220c; --promo-fg:#f3cf73; --promo-icon-bg:#3d3114; --promo-icon:#f3cf73;
  --danger:var(--status-danger-dark); --danger-bg:var(--status-danger-dark-bg); --danger-border:var(--status-danger-dark-border);
  --success:var(--status-success-dark); --success-bg:var(--status-success-dark-bg); --success-border:var(--status-success-dark-border);
  --warning:var(--status-warning-dark); --warning-bg:var(--status-warning-dark-bg); --warning-border:var(--status-warning-dark-border);
  --info:var(--status-info-dark); --info-bg:var(--status-info-dark-bg); --info-border:var(--status-info-dark-border);
  --focus:var(--brand-primary-300); --focus-ring:#86c8f666; --scrim:#000000a3; --control-checked:var(--brand-primary-500); --control-checked-hover:var(--brand-primary-400); --control-border:#6d7e82; --icon-duotone:var(--brand-primary-500);
  --bar-bg:#1d2c31; --bar-fg:#f1f5f5; --bar-muted:#a9b9bd;
  --map-sea:#0d2536; --map-land:#18252a; --map-route-done:#6d7e82; --map-pin:#f1f5f5; --map-label:#f1f5f5;
  --shadow-sm:0 1px 2px #0006; --shadow-md:0 6px 20px #0006; --shadow-lg:0 16px 40px #0009; --shadow-sheet:0 -12px 40px #0009;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme]) {
    --bg:#070f12; --bg-surface:#111b1f; --bg-subtle:#18252a; --bg-muted:#213238; --bg-inverse:var(--neutral-50);
    --fg:#f1f5f5; --fg-secondary:#c8d3d5; --fg-muted:#9aabaf;
    --fg-placeholder:#9aabaf; --fg-disabled:#6d7e82; --fg-inverse:var(--neutral-900);
    --border:#24343a; --border-strong:#6d7e82;
    --brand-primary:var(--brand-primary-400);
    --brand-primary-hover:var(--brand-primary-300);
    --brand-primary-pressed:var(--brand-primary-200);
    --brand-primary-on:var(--neutral-950);
    --brand-primary-subtle:#0c2232;
    --brand-primary-muted:#123247;
    --brand-primary-text:var(--brand-primary-300);
    --brand-primary-border:var(--brand-primary-400);
    --promo-bg:#2a220c; --promo-fg:#f3cf73; --promo-icon-bg:#3d3114; --promo-icon:#f3cf73;
    --danger:var(--status-danger-dark); --danger-bg:var(--status-danger-dark-bg); --danger-border:var(--status-danger-dark-border);
    --success:var(--status-success-dark); --success-bg:var(--status-success-dark-bg); --success-border:var(--status-success-dark-border);
    --warning:var(--status-warning-dark); --warning-bg:var(--status-warning-dark-bg); --warning-border:var(--status-warning-dark-border);
    --info:var(--status-info-dark); --info-bg:var(--status-info-dark-bg); --info-border:var(--status-info-dark-border);
    --focus:var(--brand-primary-300); --focus-ring:#86c8f666; --scrim:#000000a3; --control-checked:var(--brand-primary-500); --control-checked-hover:var(--brand-primary-400); --control-border:#6d7e82; --icon-duotone:var(--brand-primary-500);
    --bar-bg:#1d2c31; --bar-fg:#f1f5f5; --bar-muted:#a9b9bd;
    --map-sea:#0d2536; --map-land:#18252a; --map-route-done:#6d7e82; --map-pin:#f1f5f5; --map-label:#f1f5f5;
    --shadow-sm:0 1px 2px #0006; --shadow-md:0 6px 20px #0006; --shadow-lg:0 16px 40px #0009; --shadow-sheet:0 -12px 40px #0009;
    color-scheme:dark;
  }
}