/* ============================================================
   Syrine Tours — Design Tokens
   Extracted from the live site (Egens "TripRex" theme).
   Drop-in CSS custom properties for the .NET / Blazor rebuild.
   ============================================================ */

:root {
  /* ---- Brand colors ---- */
  --primary-color1: #63AB45;   /* brand green */
  --primary-color2: #FBB03B;   /* accent amber */
  --title-color:    #100C08;   /* headings (near-black) */
  --text-color:     #787878;   /* body text */
  --white-color:    #FFFFFF;
  --black-color:    #000000;

  /* ---- Secondary / UI ---- */
  --dark-ui:        #1d231f;
  --gold-1:         #dda701;
  --gold-2:         #ffc107;
  --gold-3:         #ffc200;
  --gold-4:         #efb93f;
  --google-green:   #00aa6c;

  /* ---- Soft section backgrounds ---- */
  --bg-cream:       #f9f4f0;
  --bg-grey:        #f5f4f4;
  --bg-mint:        #eef3f1;
  --bg-sand:        #ece4d7;
  --bg-peach:       #fff9f3;
  --bg-leaf:        #f4f9f1;
  --bg-green-soft:  #e8f4e3;
  --bg-green-pale:  #f0faef;

  /* ---- Overlays ---- */
  --overlay-dark-50: rgba(16, 12, 8, .5);
  --overlay-dark-40: rgba(16, 12, 8, .4);
  --overlay-dark-30: rgba(16, 12, 8, .3);
  --overlay-dark-20: rgba(16, 12, 8, .2);
  --overlay-dark-10: rgba(16, 12, 8, .1);
  --overlay-green-10: rgba(99, 171, 69, .1);
  --overlay-amber-10: rgba(251, 176, 59, .1);

  /* ---- Typography ---- */
  --font-rubik:   "Rubik", sans-serif;
  --font-jost:    "Jost", sans-serif;
  --font-sansita: "Sansita", sans-serif;
  --font-satisfy: "Satisfy", cursive;

  --body-font-size:   16px;
  --body-line-height: 30px;
  --body-weight:      400;

  --h2-size:        48px;   /* section heading */
  --h2-size-991:    35px;
  --h2-size-576:    30px;
  --eyebrow-size:   20px;   /* Satisfy script */

  /* ---- Radii ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius:    5px;   /* default */
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-2xl: 35px;
  --radius-pill: 50px;

  /* ---- Shadows ---- */
  --shadow-xs:   0 2px 20px rgba(0, 0, 0, .03);
  --shadow-card: 0 30px 80px rgba(8, 0, 42, .08);
  --shadow-sm:   0 4px 25px rgba(0, 0, 0, .08);
  --shadow-soft: 5px 3px 40px rgba(0, 72, 88, .1);
  --shadow-soft2: 4px 3px 40px rgba(16, 33, 34, .06);

  /* ---- Button ---- */
  --btn-padding:        16px 34px;
  --btn-padding-sm:     5px;
  --btn-radius:         5px;
  --btn-letter-spacing: 0.48px;
}

/* ---- Base ---- */
body {
  font-family: var(--font-rubik);
  font-size: var(--body-font-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  color: var(--title-color);
}

/* ---- Section heading + eyebrow ---- */
.section-title h2 { font-family: var(--font-rubik); font-size: var(--h2-size); font-weight: 600; line-height: 1.1; color: var(--title-color); }
.section-title span { font-family: var(--font-satisfy); font-size: var(--eyebrow-size); color: var(--primary-color1); display: inline-block; margin-bottom: 15px; }

@media (max-width: 991px) { .section-title h2 { font-size: var(--h2-size-991); } }
@media (max-width: 576px) { .section-title h2 { font-size: var(--h2-size-576); } }

/* ---- Primary button with skew-fill hover ---- */
.primary-btn1 {
  position: relative; overflow: hidden; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--btn-radius);
  background: var(--primary-color1);
  font-family: var(--font-rubik); font-weight: 600; font-size: 16px;
  color: #fff; letter-spacing: var(--btn-letter-spacing); text-transform: capitalize;
  line-height: 1; padding: var(--btn-padding);
  border: none; transition: .5s;
}
.primary-btn1::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--primary-color2);
  transform: skewX(45deg) scale(0, 1); transform-origin: left;
  transition: transform .5s;
}
.primary-btn1:hover::after { transform: skewX(45deg) scale(1, 1); }
.primary-btn-sm { padding: var(--btn-padding-sm); }

/* ---- RTL hook ---- */
[dir="rtl"] .primary-btn1::after { transform-origin: right; }