/* Nordic Concierge - design tokens (from the Blue More design system export, tokens/*.css).
   The design's global a{} rule from semantic.css is left out on purpose; links are styled per component. */

:root{
  /* Core ink — the site is a dark, deep-navy canvas */
  --blue-ink:#070c26;          /* primary surface, header, footer */
  --blue-ink-raised:#0c1230;   /* raised panel on ink */
  --blue-ink-border:#21263d;   /* hairline / control fill on ink */
  --black:#000000;

  /* Sand — the one warm counterpoint (reviews block, "More" tiles) */
  --sand-500:#83776d;
  --sand-300:#a99e94;
  --sand-100:#e7ded4;

  /* Neutrals — the light pages (All Yachts, detail) */
  --white:#ffffff;
  --grey-50:#f8f8f9;
  --grey-100:#eeeef1;
  --grey-200:#dcdce1;
  --grey-400:#8b8f9c;
  --grey-600:#575c6a;

  /* Sea accent — links and active states on light ground */
  --sea-500:#2f6f9e;
  --sea-300:#a3bedb;

  /* Accent used for award / status flags */
  --teal-400:#5abdb2;

  /* Semantic feedback */
  --danger-500:#d0342c;
  --success-500:#2e8b6b;
  --star-400:#f5b544;

  /* Alpha ramps used for glass controls over imagery */
  --white-a10:rgba(255,255,255,.10);
  --white-a20:rgba(255,255,255,.20);
  --white-a50:rgba(255,255,255,.50);
  --white-a70:rgba(255,255,255,.70);
  --ink-a40:rgba(7,12,38,.40);
  --ink-a70:rgba(7,12,38,.70);
}

:root{
  /* Body / UI scale — lifted verbatim from the site's computed styles */
  --text-xs:12px;
  --text-sm:13px;
  --text-md:14px;
  --text-lg:15px;
  --text-xl:16px;
  --text-2xl:17px;
  --text-3xl:18px;
  --text-4xl:24px;

  /* Display scale — headings and hero */
  --display-sm:28px;
  --display-md:36px;
  --display-lg:44px;
  --display-xl:56px;

  --leading-tight:1.1;
  --leading-snug:1.25;
  --leading-base:24px;   /* 16/24 is the site's body rhythm */
  --leading-relaxed:1.55;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-bold:700;
  --weight-black:900;

  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.08em;    /* footer column headings */
  --tracking-widest:0.32em;  /* "YACHTING" under the wordmark */
}

:root{
  --space-1:4px;
  --space-2:6px;
  --space-3:8px;
  --space-4:10px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:22px;
  /* layout-scale extensions used between page sections */
  --space-9:32px;
  --space-10:48px;
  --space-11:64px;
  --space-12:96px;

  --container-max:1320px;
  --gutter:20px;
  --section-gap:96px;
}

:root{
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:9999px;
}

:root{
  /* The site's single card shadow, a warm sand-tinted drop */
  --shadow-1:rgba(131,119,109,.47) 0px 3.67676px 18.0605px 0px;
  --shadow-float:0 8px 32px rgba(7,12,38,.18);
  --hairline:1px solid var(--grey-200);
  --hairline-on-ink:1px solid var(--white-a10);

  /* Protection gradient laid under text on full-bleed photography */
  --scrim-bottom:linear-gradient(180deg,rgba(7,12,38,0) 0%,rgba(7,12,38,.75) 100%); /* @kind other */
  --scrim-hero:linear-gradient(180deg,rgba(7,12,38,.45) 0%,rgba(7,12,38,0) 35%,rgba(7,12,38,.85) 100%); /* @kind other */
}

:root{
  --duration-instant:150ms; /* @kind other */
  --duration-fast:200ms; /* @kind other */
  --duration-normal:300ms; /* @kind other */
  --duration-slow:500ms; /* @kind other */
  --duration-slower:1200ms; /* @kind other */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
}

:root{
  /* Surfaces */
  --surface-base:var(--blue-ink);
  --surface-raised:var(--blue-ink-raised);
  --surface-page-light:var(--white);
  --surface-subtle:var(--grey-50);
  --surface-warm:var(--sand-500);
  --surface-control-on-ink:var(--blue-ink-border);
  --surface-glass:var(--white-a20);

  /* Text */
  --text-primary:var(--white);
  --text-secondary:var(--white-a70);
  --text-muted:var(--white-a50);
  --text-on-light:var(--blue-ink);
  --text-on-light-muted:var(--grey-600);
  --text-link:var(--sea-500);

  /* Borders */
  --border-subtle:var(--white-a10);
  --border-strong:var(--white-a20);
  --border-on-light:var(--grey-200);

  /* Controls */
  --button-primary-bg:var(--blue-ink);
  --button-primary-fg:var(--white);
  --button-invert-bg:var(--white);
  --button-invert-fg:var(--blue-ink);
  --focus-ring:0 0 0 2px var(--blue-ink),0 0 0 4px var(--white);
}