/* ==========================================================================
   Nordra design tokens
   Ported from the "Nordra Design System" tokens in the Claude Design project
   (_ds/nordra-design-system/tokens/*.css), which in turn derive from the
   Figma Variables in "Nordra - Travel Website.fig".

   The brand is a six-step neutral ramp. There is no chromatic accent anywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography families
   Both brand faces come from the Nordra Adobe Fonts kit, linked from the <head>
   of index.html. The kit's webfont family names are `kepler-std` and
   `forma-djr-micro` (not the desktop names), so those are what the stacks below
   must name.

   What the kit publishes today:
     · kepler-std        weight 900 only
     · forma-djr-micro   weights 400 and 700

   Two consequences to be aware of. Display type is set at 400 (hero) and 700
   (section and card titles) but only 900 is served, so it renders heavier than
   the design. And --weight-medium (500) has no matching Forma face; per CSS
   font matching a 500 request falls to 400, so "medium" UI text renders at
   regular. Adding Kepler Regular/Bold and Forma Medium to the kit fixes both
   without any change here.

   Archivo and Source Serif 4 remain as fallbacks: Typekit kits are
   domain-restricted, so on a domain not on the kit's allowed list the brand
   faces will not load at all and these carry the design instead.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
  /* ---- Base ramp (Figma Variables, verbatim) ---- */
  --nordra-black: #0d0d0d;
  --nordra-dark-grey: #1e1e1e;
  --nordra-mid-grey: #6f6f6f;
  --nordra-light-mid-grey: #c6c6c6;
  --nordra-light-grey: #f6f6f6;
  --nordra-white: #ffffff;

  /* ---- Extended neutrals ---- */
  --nordra-off-white: #fafafa;
  --nordra-near-black: #100f0f;
  --nordra-divider: #f6f6f6;

  /* ---- Semantic: text ---- */
  --text-primary: var(--nordra-black);
  --text-secondary: var(--nordra-mid-grey);
  --text-heading: var(--nordra-dark-grey);
  --text-placeholder: var(--nordra-light-mid-grey);
  --text-inverse: var(--nordra-white);

  /* ---- Semantic: surface ---- */
  --surface-page: var(--nordra-white);
  --surface-page-alt: var(--nordra-off-white);
  --surface-subtle: var(--nordra-light-grey);
  --surface-card: var(--nordra-white);
  --surface-inverse: var(--nordra-black);
  --surface-media-placeholder: var(--nordra-light-grey);

  /* ---- Semantic: line ---- */
  --border-subtle: var(--nordra-light-grey);
  --border-strong: var(--nordra-light-mid-grey);

  /* ---- Semantic: control ---- */
  --control-fill: var(--nordra-light-grey);
  --control-fill-selected: var(--nordra-black);
  --control-fill-raised: var(--nordra-white);
  --control-text: var(--nordra-mid-grey);
  --control-text-selected: var(--nordra-white);
  --icon-default: var(--nordra-dark-grey);
  --icon-muted: var(--nordra-mid-grey);

  /* ---- Theme-independent ----
     Content that sits on photography reads white in both themes, so these must
     NOT be expressed as --nordra-white (which flips to near-black in dark).
     The source artboards hardcoded #ffffff here; naming them keeps one markup
     serving both themes. */
  --text-on-image: #ffffff;

  /* Chrome that sits on top of a photograph — overlay chips, place badges, the
     save button, carousel dots. A photograph does not invert with the theme, so
     neither may the controls drawn over it. The source artboards expressed these
     as --nordra-white / --nordra-black, which flips them to near-black on the
     image in dark mode. */
  --on-image-chip-bg: #ffffff;
  --on-image-chip-text: #6f6f6f;
  --on-image-control-bg: #ffffff;
  --on-image-control-ink: #0d0d0d;

  /* Norway map silhouette fill. */
  --map-fill: var(--nordra-light-grey);
  --map-fill-hover: var(--nordra-mid-grey);

  /* ---- Scrims (exact gradients from the source file) ---- */
  --scrim-card-bottom: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 13.89%);
  --scrim-hero: linear-gradient(20.941deg, rgba(0, 0, 0, 0.2) 30.52%, rgba(0, 0, 0, 0) 48.61%);
  --scrim-gallery: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);

  /* ---- Typography ---- */
  --font-display: kepler-std, "Kepler Std", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: forma-djr-micro, "Forma DJR Micro", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Body copy. The artboard exports most paragraph text at a 100% line-height
     (Figma's line-height == font-size default), which sets far too tight for
     multi-line prose. Paragraphs under a heading use this instead; single-line
     UI text — labels, chips, buttons, prices, nav — keeps 100%. */
  --line-height-body: 1.3;

  --type-hero: var(--weight-regular) 60px/64px var(--font-display);
  --type-section: var(--weight-bold) 32px/36px var(--font-display);
  --type-card-title: var(--weight-bold) 28px/100% var(--font-display);

  --type-nav: var(--weight-regular) 18px/100% var(--font-sans);
  --type-button: var(--weight-medium) 18px/24px var(--font-sans);
  --type-body: var(--weight-regular) 16px/100% var(--font-sans);
  --type-body-sm: var(--weight-regular) 14px/100% var(--font-sans);
  --type-label: var(--weight-medium) 13px/100% var(--font-sans);
  --type-chip: var(--weight-regular) 14px/24px var(--font-sans);
  --type-usp-title: var(--weight-bold) 18px/100% var(--font-sans);
  --type-price: var(--weight-bold) 18px/100% var(--font-sans);
  --type-input: var(--weight-regular) 16px/24px var(--font-sans);

  /* ---- Spacing (the file's real steps; 5 and 7 are used, do not round them) ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-2h: 5px;
  --space-3: 7px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 80px;

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Control sizing ---- */
  --control-height-sm: 28px;
  --control-height-md: 38px;
  --control-height-lg: 48px;

  /* ---- Elevation (the file is nearly flat; only the datepicker floats) ---- */
  --shadow-float: 0 4px 24px rgba(0, 0, 0, 0.25);
  --blur-panel: blur(40px);

  /* ---- Layout ---- */
  --page-max: 1600px;
  --page-gutter: 80px;
  --grid-gap: 24px;
  --card-width: 342px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* --------------------------------------------------------------------------
   Dark theme
   Values taken verbatim from the "WebPage Dark" artboard, which overrides the
   base ramp as well as the semantic layer — in this system dark mode inverts
   the ramp itself rather than only re-pointing the semantic tokens.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --nordra-black: #ffffff;
  --nordra-dark-grey: #ededed;
  --nordra-mid-grey: #b0b0b0;
  --nordra-light-mid-grey: #8a8a8a;
  --nordra-light-grey: #1e1e1e;
  --nordra-white: #100f0f;
  --nordra-off-white: #0d0d0d;
  --nordra-divider: #2a2a2a;

  --text-primary: #ffffff;
  --text-secondary: #b0b0b0;
  --text-heading: #ffffff;
  --text-placeholder: #8a8a8a;
  --text-inverse: #100f0f;

  --surface-page: #100f0f;
  --surface-page-alt: #0d0d0d;
  --surface-subtle: #1e1e1e;
  --surface-card: #181818;
  --surface-inverse: #ffffff;
  --surface-media-placeholder: #1e1e1e;

  --border-subtle: #2e2e2e;
  --border-strong: #3f3f3f;

  --control-fill: #1e1e1e;
  --control-fill-selected: #ffffff;
  --control-fill-raised: #0d0d0d;
  --control-text: #b0b0b0;
  --control-text-selected: #100f0f;
  --icon-default: #ededed;
  --icon-muted: #b0b0b0;

  --map-fill: #333333;
  --map-fill-hover: #b0b0b0;
}