/* ============================================================
   Base Bali Villas · Deck v3 · Design Tokens
   Source: v3_TZ.md §4 (1:1, no deviations)
   ============================================================ */

:root {
  /* ============================================================
     BRAND COLORS — Base · Bali Villas
     Primary navy (replaces all "black" surfaces and text).
     Use --c-brand-navy as the canonical reference; --c-ink and
     --c-bg-dark are aliases that resolve to the same value.
     ============================================================ */
  --c-brand-navy        : #1A2543;  /* ← фирменный navy (черный с синеватым оттенком) */
  --c-brand-navy-deep   : #11182F;  /* deeper variant for hero/footer accents */
  --c-brand-navy-soft   : #2D3653;  /* secondary text on light bg */

  /* ---------- 4.1 Surfaces ---------- */
  --c-bg            : #FFFFFF;             /* основной фон */
  --c-bg-deep       : #F5F6F8;             /* secondary surface — slight cool tint */
  --c-bg-dark       : var(--c-brand-navy); /* инверсия = brand navy */
  --c-bg-darker     : var(--c-brand-navy-deep);

  /* ---------- Ink (text) — modern editorial, blue undertone ---------- */
  --c-ink           : var(--c-brand-navy);      /* основной текст */
  --c-ink-soft      : var(--c-brand-navy-soft); /* secondary текст */
  --c-ink-muted     : #5A5F70;  /* подписи, метаданные · WCAG AA 5.5:1 на белом (P1-23 contrast lift, было #6B7080 = 4.6:1) */
  --c-ink-faint     : #9CA1B0;  /* hairline labels, disabled */
  --c-ink-on-dark   : #F0F2F8;  /* текст на dark surface */
  --c-ink-on-photo  : #FFFFFF;  /* текст на photo-bg */

  /* ---------- Lines ---------- */
  --c-line          : #DEE0E5;  /* hairline divider — cool neutral */
  --c-line-soft     : #EAECEF;  /* очень тонкая линия */
  --c-line-on-dark  : rgba(255,255,255,0.12);

  /* ---------- Accent (use sparingly) ---------- */
  --c-accent        : #2F5040;  /* deep forest — luxe natural */
  --c-accent-deep   : #1F3A2D;  /* hover state */
  --c-accent-soft   : rgba(47,80,64,0.10);  /* фон-чип */

  /* ---------- Photo overlay ---------- */
  /* light: barely there (decorative) */
  --c-overlay-light : linear-gradient(180deg, rgba(26,37,67,0.00) 0%, rgba(26,37,67,0.10) 100%);
  /* dark: bright top, deep gradient to bottom for hero text legibility (slide 01 cover) */
  --c-overlay-dark  : linear-gradient(180deg, rgba(26,37,67,0.06) 0%, rgba(26,37,67,0.28) 55%, rgba(26,37,67,0.86) 100%);
  /* night: dark inversion slides (13, 15) — strong veil for white text */
  --c-overlay-night : linear-gradient(180deg, rgba(26,37,67,0.62) 0%, rgba(26,37,67,0.86) 100%);

  /* ---------- Shadows ---------- */
  --shadow-card     : 0 1px 2px rgba(26,37,67,0.04), 0 8px 24px rgba(26,37,67,0.06);
  --shadow-hero     : 0 32px 80px rgba(26,37,67,0.18);
  --shadow-inset    : inset 0 0 0 1px var(--c-line);

  /* ---------- 4.2 Typography ----------
     Inverse modern pairing (sans display + serif body):
     - Bricolage Grotesque: variable grotesque with optical sizing → headlines, big numbers
     - Newsreader         : NYT-style editorial serif with optical sizing → body, lead, quotes
     - JetBrains Mono     : true monospace → labels, eyebrows, captions
  */
  /* Display swapped 2026-05-01: Bricolage Grotesque → Montserrat (kentokawazoe.com style)
     Montserrat дает thin geometric look для luxe headlines (weight 100-300 для accents) */
  --f-display : "Montserrat", "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-display-thin : "Montserrat", -apple-system, sans-serif;
  --f-body    : "Newsreader", "Times New Roman", Georgia, serif;
  --f-mono    : "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (modular, slightly larger for sophisticated presence) */
  --t-mono-xs   : 11px;
  --t-mono-sm   : 13px;
  --t-body-sm   : 15px;
  --t-body      : 18px;
  --t-body-lg   : 22px;
  --t-body-xl   : 26px;
  --t-display-1 : 32px;
  --t-display-2 : 48px;
  --t-display-3 : 76px;
  --t-display-4 : 112px;
  --t-display-5 : 168px;
  --t-display-6 : 220px;

  /* Letter-spacing — Big Shoulders is condensed, light tracking works best */
  --ls-mono-label : 0.20em;
  --ls-mono-small : 0.08em;
  --ls-display    : -0.005em;
  --ls-display-lg : -0.012em;

  /* Line height */
  --lh-tight   : 0.95;
  --lh-display : 1.05;
  --lh-body    : 1.55;
  --lh-relaxed : 1.7;

  /* ---------- 4.3 Spacing (8-point grid) ---------- */
  --s-1  : 4px;
  --s-2  : 8px;
  --s-3  : 12px;
  --s-4  : 16px;
  --s-5  : 24px;
  --s-6  : 32px;
  --s-7  : 48px;
  --s-8  : 64px;
  --s-9  : 96px;
  --s-10 : 128px;
  --s-11 : 160px;
  --s-12 : 192px;

  /* ---------- 4.4 Radii ---------- */
  --r-0 : 0;
  --r-1 : 2px;
  --r-2 : 4px;
  --r-3 : 8px;
  --r-pill : 999px;
  /* Card radii — fluid responsive */
  --r-card-sm : clamp(14px, 1.2vw, 22px);  /* gallery cards */
  --r-card    : clamp(16px, 1.4vw, 24px);  /* gallery hero, mid-cards */
  --r-card-lg : clamp(24px, 2.4vw, 40px);  /* section cards (slide-stage) */

  /* ---------- 4.4b Hairline ---------- */
  --hairline : 1px;

  /* ---------- 4.5 Motion ---------- */
  --ease-out      : cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out   : cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring   : cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-fast    : 200ms;
  --d-medium  : 400ms;
  --d-slow    : 700ms;
  --d-slower  : 1100ms;
}