/* ==========================================================================
   Deep Waters — tokens.css
   Custom properties only. No selectors beyond :root and the media queries that
   redefine a token. If you are writing a property that paints something, it
   belongs in base / layout / components, not here.

   The palette is wet limestone seen from inside a slot canyon: cold charcoal
   rock, warm dry limestone where you climb out, glacial river blue, the green
   of beech and moss, and one ember orange that is only ever a booking action.
   ========================================================================== */

:root {
  /* --- Rock: the dark ground -------------------------------------------- */
  --rock-980: #07090b;   /* deepest — hero letterbox, footer floor */
  --rock-950: #0a0e10;   /* page background */
  --rock-900: #10161a;   /* raised dark bands */
  --rock-850: #151d22;   /* cards on dark */
  --rock-800: #1c262c;   /* elevated surfaces, hover */
  --rock-700: #26333a;   /* hairlines that need to be seen */
  --rock-600: #38474f;   /* borders on dark */
  --rock-400: #9aa8ae;   /* secondary text on dark — 7.9:1 on --rock-950 */
  --rock-200: #cdd6d9;

  /* --- Limestone: the warm light ---------------------------------------- */
  /* Cold grey read as a corporate template. Dry limestone is what you sit on
     when you climb out of the water, and it reads as stone rather than as UI. */
  --stone-50:  #faf7f1;  /* paper: cards on light */
  --stone-100: #f0ebe1;  /* light section background */
  --stone-200: #e3dcce;
  --stone-300: #d2c8b6;
  --ink-900:   #12171a;  /* text on limestone — 15.4:1 */
  --ink-600:   #4d5a60;  /* muted on limestone — 5.6:1 */

  /* --- River: glacial water --------------------------------------------- */
  --river-900: #062430;
  --river-700: #0d4d5e;
  --river-600: #14707f;
  --river-500: #17796e;  /* the original water-600; links on light */
  --river-400: #3fa7b3;
  --river-300: #6fc9c2;  /* accents on dark — 7.4:1 on --rock-950 */
  --river-200: #a5e0d8;

  /* --- Forest: moss and beech ------------------------------------------- */
  --forest-900: #101d15;
  --forest-700: #1d3524;
  --forest-500: #3d6b45;
  --forest-300: #7ba883;

  /* --- Earth: wet mud, dry sand ----------------------------------------- */
  --earth-800: #241b12;
  --earth-600: #4a3a28;
  --sand-400:  #b8a184;

  /* --- Ember: the one accent -------------------------------------------- */
  /* CTAs only. If two ember buttons are visible at once, one is wrong.
     Copper rather than safety orange: #ff5a1f was the loudest thing on a page
     built from charcoal, limestone and river green, and it read as a warning
     label. Copper still separates warm from cool and still carries dark text at
     5.1:1, but it sits in the palette instead of shouting over it. */
  --ember-600: #b96830;
  --ember-500: #c87137;
  --ember-400: #db8547;
  --ember-glow: rgb(200 113 55 / 30%);

  /* --- Semantic aliases -------------------------------------------------- */
  --bg:            var(--rock-950);
  --bg-raised:     var(--rock-850);
  --bg-deep:       var(--rock-980);
  --text:          #f3f6f5;
  --text-muted:    var(--rock-400);
  --link:          var(--river-300);
  --link-hover:    #ffffff;
  --hairline:      rgb(154 168 174 / 22%);
  --hairline-firm: rgb(154 168 174 / 38%);
  --accent:        var(--river-300);
  --cta:           var(--ember-500);
  --cta-text:      #1a0c00;               /* 5.1:1 on copper --ember-500 */
  --focus:         var(--river-300);
  --error:         #ff8f6d;

  /* Light-section counterparts */
  --bg-light:       var(--stone-100);
  --bg-paper:       var(--stone-50);
  --text-on-light:  var(--ink-900);
  --muted-on-light: var(--ink-600);
  --link-on-light:  var(--river-500);
  --hairline-light: rgb(18 23 26 / 14%);
  --hairline-light-firm: rgb(18 23 26 / 26%);
  --error-on-light: #a3300a;

  /* --- Type -------------------------------------------------------------- */
  /* Rubik, not a serif: the old face read as a newspaper masthead. Rubik is a
     geometric sans with slightly softened corners that holds up at 900 weight,
     and — the reason it was chosen over a dozen sportier faces — it carries
     Hebrew AND Latin Extended, so the brand still looks like itself in all
     three locales and the Montenegrin diacritics still render. */
  --font-display: Rubik, "Helvetica Neue", Arial, sans-serif;
  --font-body: Assistant, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;

  /* Bigger and more confident than the old scale. The hero and section heads
     are meant to be the loudest things on the page. */
  --fs-hero:    clamp(2.85rem, 1.1rem + 7.4vw, 5.5rem);
  --fs-display: clamp(2.35rem, 1.2rem + 4.6vw, 4rem);
  --fs-h2:      clamp(1.9rem, 1.25rem + 2.5vw, 2.95rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + 0.8vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;   /* the tracked uppercase data label */

  --lh-hero:    0.94;
  --lh-display: 1.02;
  --lh-heading: 1.1;
  --lh-body:    1.68;

  --tr-display: -0.02em;   /* tight tracking is where the confidence lives */
  --tr-label:   0.17em;
  --tr-btn:     0.09em;

  --data-weight: 600;
  --data-tracking: var(--tr-label);

  /* --- Space: 4px base --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 11rem;

  /* Sections breathe more than they did — negative space is most of the
     difference between "premium" and "cramped". */
  --section-y: clamp(var(--sp-8), 4vw + 2rem, var(--sp-10));
  --section-y-lg: clamp(var(--sp-9), 6vw + 2rem, var(--sp-11));

  /* --- Measure ----------------------------------------------------------- */
  --wrap: 78rem;
  --wrap-narrow: 42rem;
  --wrap-slot: 25rem;
  --gutter: clamp(var(--sp-5), 4.5vw, var(--sp-8));

  /* --- Form ------------------------------------------------------------- */
  /* Buttons are fully rounded so they read as something you press, not as a
     block cut out of the page. Surfaces stay at a modest 6px — enough to lose
     the cut-stone hardness without turning into a dashboard card. */
  --radius: 6px;
  --radius-lg: 10px;
  --radius-btn: 999px;
  --radius-input: 10px;
  --border: 1px;
  --header-h: 4.5rem;

  /* Layered shadows, weighted downward like real light from a canyon rim */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
  --shadow: 0 2px 4px rgb(0 0 0 / 24%), 0 8px 24px rgb(0 0 0 / 28%);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 22%), 0 24px 56px rgb(0 0 0 / 40%);
  --shadow-paper: 0 1px 2px rgb(18 23 26 / 8%), 0 12px 28px rgb(18 23 26 / 10%);

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;
  --dur-reveal: 900ms;
  /* Cinematic: leaves fast, arrives slowly, never bounces */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}