/* SALTA — design tokens.
   One place for palette, type scale, rhythm, radii and motion timing. */

:root {
  /* --- palette -------------------------------------------------------- */
  --deep:    #052B45;   /* primary deep ocean — structural */
  --blue:    #006FFF;   /* electric ocean blue */
  --cyan:    #00CFE8;   /* caribbean cyan */
  --turq:    #23E5D2;   /* turquoise */
  --white:   #F7F7F2;   /* warm white — structural */
  --orange:  #FF6B35;   /* sunset only */
  --lime:    #D9FF43;   /* accent, used sparingly */
  --dark:    #071820;   /* near black */

  --deep-80: rgba(5, 43, 69, .80);
  --deep-45: rgba(5, 43, 69, .45);
  --dark-70: rgba(7, 24, 32, .70);
  --white-70: rgba(247, 247, 242, .70);
  --white-45: rgba(247, 247, 242, .45);
  --white-14: rgba(247, 247, 242, .14);
  --deep-12: rgba(5, 43, 69, .12);

  /* section-local roles, flipped by .is-dark / .is-sunset */
  --bg: var(--white);
  --fg: var(--deep);
  --muted: rgba(5, 43, 69, .62);
  --rule: rgba(5, 43, 69, .14);
  --accent: var(--blue);

  /* --- typography ------------------------------------------------------ */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter Tight', 'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* display scale — deliberately oversized, clamped per viewport */
  --t-mega:  clamp(3.4rem, min(15.5vw, 26vh), 15rem); /* hero / typographic breaks */
  --t-huge:  clamp(2.6rem, 8.2vw, 7.5rem);            /* section headlines */
  --t-big:   clamp(2rem, 5.4vw, 4.4rem);     /* sub headlines */
  --t-mid:   clamp(1.5rem, 3vw, 2.4rem);     /* card titles */
  --t-lede:  clamp(1.05rem, 1.35vw, 1.35rem);/* intro paragraphs */
  --t-body:  clamp(.95rem, 1.05vw, 1.06rem);
  --t-small: .85rem;
  --t-label: .72rem;                          /* uppercase micro labels */

  --track-mega: -.045em;
  --track-huge: -.035em;
  --track-label: .22em;

  /* --- rhythm ---------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1440px;
  --maxw-text: 62ch;
  --sect-y: clamp(5rem, 11vh, 9.5rem);
  --gap: clamp(1rem, 2vw, 2rem);

  /* --- rounded imagery -------------------------------------------------
     Editorial radii: present enough to soften every photograph, tight enough
     that nothing reads as a rounded SaaS card. */
  --r-xl: clamp(16px, 1.6vw, 26px);   /* full-bleed inset panels */
  --r-lg: clamp(14px, 1.2vw, 20px);   /* large framed photographs */
  --r-md: clamp(12px, 1vw, 16px);     /* cards, gallery tiles */
  --r-sm: 10px;                       /* small tiles, route thumbs */
  --r-btn: 999px;                     /* pills for actions */

  /* image hover contract */
  --img-zoom: 1.055;
  --img-lift: -6px;
  --img-shadow: 0 26px 60px -28px rgba(5, 43, 69, .55);

  /* --- motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-fast: .28s;
  --dur: .6s;
  --dur-slow: 1.1s;
  --dur-image: .9s;   /* photographs move slower than UI */

  --header-h: 74px;
  --z-cursor: 90;
  --z-modal: 80;
  --z-header: 60;
  --z-float: 50;
}

/* Dark chapters: deep ocean and underwater. */
.is-dark {
  --bg: var(--deep);
  --fg: var(--white);
  --muted: rgba(247, 247, 242, .68);
  --rule: rgba(247, 247, 242, .18);
  --accent: var(--turq);
}

/* The story reaches golden hour: same structure, warmer accent. */
.is-sunset {
  --bg: var(--dark);
  --fg: var(--white);
  --muted: rgba(247, 247, 242, .70);
  --rule: rgba(247, 247, 242, .18);
  --accent: var(--orange);
}

@media (max-width: 768px) {
  :root {
    --header-h: 62px;
    --img-zoom: 1.03;
    --img-lift: -3px;
  }
}