/* surf: the "beach to deep water" palette (round 39). ONE source of truth for colour and type: every page links this file
   first and uses only these variables; the map and the ocean read them too. Light surfaces, one blue (ocean) with its
   deep shade, dark abyss sections, and the sun as the only warm colour (primary buttons, the logo dot, warm glows). */
:root{
  /* light surfaces */
  --bg:#FCFFFF;          /* main page */
  --sand:#F6EEE3;        /* warm alternate sections */
  --mist:#EAF6FB;        /* cool alternate (the hero's sky), sparingly */
  /* ocean: the dark end of the range */
  --ocean:#0593C6;       /* accent on LIGHT sections: italic headline words, icons, highlights */
  --ocean-deep:#036A93;  /* small blue text and links on light */
  --abyss:#04141F;       /* EVERY dark surface: the map, its hover card's ground, the closing call to action, the footer */
  --abyss-2:#071E2C;     /* raised surfaces on dark */
  --glow:var(--ocean);   /* the accent on DARK sections: the brand blue since round 44 (was aqua #5EF0D8); 5.3:1 on --abyss */
  /* text */
  --ink:#0A2533;         /* text on light */
  --ink-muted:#4A6573;
  --foam:#F3F8F9;        /* text on dark */
  --foam-muted:rgba(243,248,249,.68);
  /* sun: the only warm colour */
  --sun:#FF6B47;         /* primary CTAs (and the logo dot) only */
  --sun-hover:#F25A38;
  --sun-haze:#FFE6D6;    /* warm glows and horizon haze only */
  /* lines */
  --line:rgba(10,37,51,.08);
  --line-dark:rgba(243,248,249,.08);
  /* form errors: the one colour outside the palette, kept so a wrong field is never signalled by colour alone being blue */
  --error:#B42318;

  /* the same colours as channels, for rgba() */
  --rgb-ink:10,37,51;--rgb-ocean:5,147,198;--rgb-ocean-deep:3,106,147;--rgb-abyss:4,20,31;--rgb-abyss-2:7,30,44;--rgb-glow:5,147,198;
  --rgb-foam:243,248,249;--rgb-sand:246,238,227;--rgb-sun:255,107,71;--rgb-sun-haze:255,230,214;

  /* surfaces built from the palette */
  --card:#FFFFFF;                                  /* cards on light */
  --card-dark:rgba(243,248,249,.04);               /* cards on dark */
  --glass:rgba(255,255,255,.72);                   /* floating bars: hero input, chip row, nav on scroll */
  --hair:0 1px 2px rgba(10,37,51,.06);             /* the only shadow on the site */
  --tint:rgba(5,147,198,.10);                      /* ocean at 10%: badges, featured chips */
  --on-sun:#0A2533;                                /* text on sun buttons, wherever they sit */

  /* type: Geist everywhere (400, 500 for small UI labels); Instrument Serif italic for one emphasised word per heading,
     the logo, and the big figures */
  --font-sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --d:var(--font-sans);--b:var(--font-sans);--dw:400;--dt:-.038em;--ds:1;
}

/* A dark section: everything inside that reads --ink/--ink-muted/--line gets the foam versions, so components work on
   both without separate rules. A light surface inside a dark section (an input bar, a card) resets them with .on-light. */
.dark{--ink:var(--foam);--ink-muted:var(--foam-muted);--line:var(--line-dark);--rgb-ink:243,248,249;--tint:rgba(243,248,249,.06);color:var(--foam)}
.dark .on-light,.on-light{--ink:#0A2533;--ink-muted:#4A6573;--line:rgba(10,37,51,.08);--rgb-ink:10,37,51;--tint:rgba(5,147,198,.10)}

/* <Logo />: the lowercase wordmark "surf." in Instrument Serif (regular). Markup is just the word, `<a class="wm">surf</a>`;
   the sun-coloured period is drawn here, once. On a dark section the word turns foam (it reads --ink). */
.wm{font-family:var(--font-serif);font-style:normal;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.wm::after{content:".";color:var(--sun)}

/* ================= round 42: glass surfaces, glossy buttons, map colours =================
   Every surface below is built from these tokens; retune the look here without touching component code. */
:root{
  /* glass on light sections */
  --glass-top:rgba(255,255,255,.78);
  --glass-bottom:rgba(255,255,255,.50);
  --glass-rim:rgba(255,255,255,.90);
  --glass-edge:rgba(10,37,51,.07);          /* outer hairline so it reads on pale backgrounds */
  --glass-shine:rgba(255,255,255,1);        /* inner top highlight */
  --glass-shadow:0 10px 30px -12px rgba(10,37,51,.18);
  --glass-blur:18px;
  /* pills inside a glass row */
  --pill-selected-bg:#FFFFFF;
  --pill-selected-fg:#0A2533;
  --pill-selected-shadow:0 2px 8px rgba(10,37,51,.10);
  --pill-hover:rgba(10,37,51,.04);
  --pill-divider:rgba(10,37,51,.10);        /* the rim colour is white on light glass and wouldn't show, so a faint ink line here */
  /* the primary button: glossy sun */
  --btn-top:#FF8F70;
  --btn-bottom:#F25A38;
  --btn-rim:rgba(160,48,20,.25);
  --btn-fg:#0A2533;
  --btn-glow:rgba(255,107,71,.45);
  /* the map */
  --map-bg:var(--abyss);                     /* the map's section: the one dark ground */
  --map-dot:rgba(10,37,51,.10);              /* base dots: neutral, never the section's hue */
  --map-hi:var(--ocean-deep);                /* highlighted dots on light (unused today: the map sits on dark) */
  --map-hi-glow:rgba(3,106,147,.55);
  --map-ring:rgba(10,37,51,.40);             /* area markers */
}
.dark,.dark-section,[data-surface="dark"],.nav.on-dark{
  --glass-top:rgba(255,255,255,.08);
  --glass-bottom:rgba(255,255,255,.03);
  --glass-rim:rgba(255,255,255,.10);
  --glass-edge:rgba(0,0,0,.30);
  --glass-shine:rgba(255,255,255,.10);
  --glass-shadow:0 10px 30px -12px rgba(0,0,0,.5);
  --pill-selected-bg:#F3F8F9;
  --pill-selected-fg:#0A2533;
  --pill-hover:rgba(255,255,255,.06);
  --pill-divider:var(--glass-rim);
  --map-dot:rgba(243,248,249,.12);
  --map-hi:var(--glow);                      /* highlighted map dots: the brand blue */
  --map-hi-glow:rgba(var(--rgb-glow),.55);
  --map-ring:rgba(243,248,249,.55);
}

/* frosted glass: the hero bar and chip row, the map's filter row and area menu, the closing bar, the badge, the nav once condensed */
.glass,.nav.scrolled .nav-in,.nav.menu-open .nav-in{
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  border:1px solid var(--glass-rim);
  box-shadow:inset 0 1px 0 var(--glass-shine),0 0 0 1px var(--glass-edge),var(--glass-shadow);
}

/* the primary button: lighter top, deeper bottom, a bright inner top edge, a darker rim, a glow of its own colour */
.btn-primary{
  background:linear-gradient(180deg,var(--btn-top) 0%,var(--btn-bottom) 100%);
  color:var(--btn-fg);
  border:1px solid var(--btn-rim);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(0,0,0,.08),0 8px 24px -8px var(--btn-glow);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-primary:hover{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(0,0,0,.08),0 10px 30px -8px var(--btn-glow)}
.btn-primary:active{transform:translateY(1px) scale(.99)}

/* round 43: the one pill picker. A track holds options; the selected one is a solid pill. On glass (a floating row) the track
   is the glass itself; on a white card it is a pale track (.picker--card); on dark sections it is dark glass. */
:root{--track-card:rgba(10,37,51,.04);--track-card-edge:rgba(10,37,51,.06);--track-card-shine:rgba(255,255,255,.75)}
.picker{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px}
.picker--card{background:var(--track-card);box-shadow:inset 0 0 0 1px var(--track-card-edge),inset 0 1px 0 var(--track-card-shine)}
.pick{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:transparent;
  color:var(--ink-muted);font:500 15px var(--b);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.pick:hover{background:var(--pill-hover);color:var(--ink)}
.pick.on,.pick[aria-selected="true"],.pick[aria-pressed="true"],.pick:has(input:checked),
.pick.on:hover,.pick[aria-selected="true"]:hover,.pick[aria-pressed="true"]:hover,.pick:has(input:checked):hover{
  background:var(--pill-selected-bg);color:var(--pill-selected-fg);box-shadow:var(--pill-selected-shadow)}
/* dark sections: focus rings in aqua */
.dark :focus-visible{outline-color:var(--glow)}