// =============================================================================
// SAFARI LODGES — OPTION 2 UPDATED — DESIGN TOKENS
// Three categorised groups for easy TYPO3 backend developer mapping:
//   1. COLORS        → TYPO3 constants / RTE presets
//   2. TYPOGRAPHY    → TYPO3 RTE preset / font configuration
//   3. SPACING       → TYPO3 frame-space PageTSconfig options
// =============================================================================

// --- Build-time: breakpoints (consumed by respond-to() in _mixins.scss) ------
$breakpoints: (
  'tablet':  48rem,    // 768px
  'laptop':  62rem,    // 992px — matches Bootstrap's own $grid-breakpoints 'lg'; where
                       // the sticky nav switches from the mobile/tablet footer bar to
                       // the desktop header nav (see _header.scss, d-lg-* utilities)
  'desktop': 90rem,    // 1440px
  'wide':    120rem,   // 1920px — matches main.scss's Bootstrap xxxl container tier
);

// ═══════════════════════════════════════════════════════════════════════
// 1. COLORS — from Figma variable collections
//    Map these to TYPO3 constants (EXT:site_package/Configuration/TypoScript)
// ═══════════════════════════════════════════════════════════════════════
:root {
  // Brand palette
  --color-brand:       #b8923b;    // brand 600 — mobile nav bar bg (Figma: colors/brand/600)
  --color-gold:        #dab050;    // brand gold — buttons, borders, accents
  --color-gold-dark:   #956019;    // brand gold dark — headings, links
  --color-dark-green:  #37443a;    // lunar green — hover states
  --color-ink:         #0a0d12;    // ink black — menu overlay panel bg (Figma 18224:117)

  // Surface
  --color-pampas:          #f2f1ec;    // page/section background (v2: bg-primary_alt)
  --color-bg-primary-alt:  #f2f1ec;    // alias — Colors/Background/bg-primary_alt
  --color-bg-tertiary:     #f5f5f5;    // drawer info card bg (bg-tertiary)
  --color-bg-brand-primary-alt: #fffaf0;  // Colors/Background/bg-brand-primary_alt
  --color-cream:           #fcfbf7;    // card / testimonial / newsletter bg
  --color-white:           #ffffff;

  // Text
  --color-text-primary:              #181d27;
  --color-text-secondary:            #414651;
  --color-text-muted:                #717680;
  --color-text-tertiary:             #535862;    // text-tertiary (600)
  --color-text-brand-secondary-700:  #967529;    // drawer info card heading gold
  --color-nandor:                    #49554c;    // eyebrow labels
  --color-gray-400:                  #a4a7ae;    // booking widget placeholders

  // Supporting
  --color-mantle:          #8ea093;    // slider icon tint
  --color-satin-linen:     #e7e5db;    // slider nav button bg
  --color-green-spring:    #bcbfb8;    // footer social icon borders
  --color-border:          #d5d7da;    // inputs, dividers (border-primary)
  --color-border-secondary: #e9eaeb;   // border-secondary

  // Bootstrap overrides — align Bootstrap's body defaults with design tokens
  --bs-body-bg:         #f2f1ec;    // override Bootstrap white → pampas (v2)
  --bs-body-color:      #181d27;    // override Bootstrap #212529 → design text primary
}

// ═══════════════════════════════════════════════════════════════════════
// 2. TYPOGRAPHY — fonts, scale, weights, line-heights
//    Map these to TYPO3 RTE typoscript / frontend_editing config
// ═══════════════════════════════════════════════════════════════════════
:root {
  // Font families
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-ui:       'Poppins', system-ui, sans-serif;

  // Type scale
  --fs-xs:          0.75rem;    // 12px — meta, copyright
  --fs-sm:          0.875rem;   // 14px — T&Cs link
  --fs-base:        1rem;       // 16px — body, buttons
  --fs-lg:          1.125rem;   // 18px — lead body text
  --fs-xl:          1.25rem;    // 20px — eyebrow labels
  --fs-display-xs:  1.5rem;     // 24px — card labels
  --fs-display-sm:  1.875rem;   // 30px — testimonial titles
  --fs-display-md:  2.25rem;    // 36px — (reserved)
  --fs-display-lg:  3rem;       // 48px — section headings
  --fs-40:          2.5rem;     // 40px — (new v2 scale step)
  --fs-display-2xl: 4.5rem;     // 72px — hero title

  // Font weights
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  // Line heights
  --lh-xs:          1.125rem;   // 18px
  --lh-sm:          1.25rem;    // 20px
  --lh-base:        1.5rem;     // 24px
  --lh-lg:          2rem;       // 32px
  --lh-lg-tight:    1.75rem;    // 28px (text-lg semibold)
  --lh-xl:          1.875rem;   // 30px
  --lh-display-xs:  2rem;       // 32px
  --lh-display-sm:  2.375rem;   // 38px
  --lh-display-md:  2.75rem;    // 44px
  --lh-display-lg:  3.75rem;    // 60px (v2: was 56px)
  --lh-display-2xl: 5.625rem;   // 90px

  // Letter spacing
  --ls-hero: -0.02em;    // -2% (Figma letter-spacing: -2% across all display styles)

  // Shadows
  --shadow-xs: 0 1px 2px 0 rgba(10, 13, 18, 0.05);   // shadow-xs — buttons + inputs
}

// ═══════════════════════════════════════════════════════════════════════
// 3. SPACING — component spacing + TYPO3 frame-space mapping
//    TYPO3 PageTSconfig: TCEFORM.tt_content.tx_gridelements_backend_layout
// ═══════════════════════════════════════════════════════════════════════
:root {
  // Component-level spacing (rem scale)
  --space-half: 0.125rem;   // 2px  (spacing-xxs)
  --space-1:    0.25rem;    // 4px
  --space-1-5:  0.375rem;   // 6px  (spacing-sm)
  --space-2:    0.5rem;     // 8px
  --space-3:    0.75rem;    // 12px
  --space-4:    1rem;       // 16px
  --space-5:    1.25rem;    // 20px (spacing-2xl)
  --space-6:    1.5rem;     // 24px
  --space-8:    2rem;       // 32px
  --space-10:   2.5rem;     // 40px
  --space-12:   3rem;       // 48px
  --space-14:   3.5rem;     // 56px (spacing-6xl-2 — mobile section padding)
  --space-16:   4rem;       // 64px
  --space-20:   5rem;       // 80px
  --space-24:   6rem;       // 96px
  --space-30:   7.5rem;     // 120px
  --space-40:   10rem;      // 160px

  // Section rhythm — the single source of truth for the vertical padding every
  // in-flow component carries top/bottom. 56px mobile+tablet, 80px laptop up
  // (see the @media override right after this block closes). Deliberately its
  // own token rather than reusing --space-14/--space-20: this scale has been
  // hit twice by an unrelated third-party bundle injecting an unscoped :root
  // with colliding names (see packages/sflg_accommodation's booking-widget.js)
  // — a name unique to this codebase can't collide the same way again.
  --section-space: 3.5rem;  // 56px

  // Layout
  --container-max:   75rem;    // 1200px
  --container-outer: 90rem;    // 1440px
  --content-pad-x:   7.5rem;   // 120px — standard horizontal padding

  // Radii
  --radius-2xs:  2px;      // footer social boxes, legacy-only
  --radius-xs:   4px;      // v2: buttons, cards, inputs (was 2px)
  --radius-sm:   4px;      // alias for --radius-xs
  --radius-md:   8px;
  --radius-pill: 20px;
  --radius-full: 9999px;

  // Typography block spacing — shared eyebrow/title/body rhythm for duplicated
  // typography stacks (content-only-intro, etc). Figma 18580:10876 (mobile):
  // mobile title->body gap (32px) is now LARGER than its own desktop value
  // (24px) — not a simple "scaled down" relationship. paragraph->paragraph
  // mobile gap stays 24px (same as desktop's underlying token before scaling).
  --gap-eyebrow-title:         1rem;      // 16px (both mobile & desktop)
  --gap-title-body:            1.5rem;    // 24px desktop
  --gap-title-body-mobile:     2rem;      // 32px mobile
  --gap-paragraph:             3rem;      // 48px desktop
  --gap-paragraph-mobile:      1.5rem;    // 24px mobile
}

// --section-space steps up at 'laptop' (992px).
//
// This override has to stay in this file, immediately after the :root block
// it overrides. Imports are not deduplicated, and every component partial
// pulls this file in via _mixins.scss, so the :root block above is emitted
// many times over into the compiled stylesheet. Because each emission
// carries the base value AND this override together, the last one still
// wins and the value stays correct. Moving this media query into main.scss
// or _typo3-spacing.scss would let a later re-emission of this file reset
// --section-space back to 56px, silently killing the rhythm above 992px.
// Verify in the browser with getComputedStyle on the root element, reading
// --section-space: it must be 56px below 992px and 80px at/above.
@media (min-width: map-get($breakpoints, 'laptop')) {   // 992px
  :root {
    --section-space: 5rem;  // 80px
  }
}

// TYPO3 frame-space Sass variables — section-to-section gaps from design
// Derived from design measurement analysis (Phase 1 Step 4d)
// These feed _typo3-spacing.scss and match TYPO3 frame-space-before/after values
$typo3-space-none:         0;
$typo3-space-extra-small:  1.25rem;   // 20px
$typo3-space-small:        2.5rem;    // 40px
$typo3-space-medium:       5rem;      // 80px
$typo3-space-large:        7.5rem;    // 120px
$typo3-space-extra-large:  10rem;     // 160px