/* ============================================================
   Design Tokens — CUSTOMIZE THIS FILE FOR EACH SITE
   ============================================================
   This is the ONLY file you MUST change per site.
   Swap colors, fonts, and you get a different-looking site.
   ============================================================ */

:root {
  /* === Colors — CHANGE THESE === */
  --primary:       #B08B56;   /* Main brand color — change to match your brand */
  --primary-light: #CCA66F;
  --primary-dark:  #8A6B3E;
  --secondary:     #435067;   /* Secondary color */
  --secondary-light: #5A6A82;
  --dark:          #1F2633;   /* Dark backgrounds */
  --dark-alt:      #2A3344;   /* Nav background */
  --accent:        #612926;   /* Links, accents */
  --accent-dark:   #4A1F1D;

  /* Semantic colors (rarely need changing) */
  --text:          #201F22;
  --text-light:    #899389;
  --text-muted:    #6B7280;
  --bg:            #FFFFFF;
  --bg-alt:        #F8F8F8;
  --bg-warm:       #FBF9F6;
  --highlight:     #DCE8FF;
  --success:       #4C823C;
  --error:         #9A241C;
  --border:        #E5E7EB;

  /* Aliases (components use these) */
  --gold:          var(--primary);
  --gold-light:    var(--primary-light);
  --gold-dark:     var(--primary-dark);
  --blue:          var(--secondary);
  --blue-light:    var(--secondary-light);
  --navy:          var(--dark);
  --navy-dark:     var(--dark);
  --nav-bg:        var(--dark-alt);
  --maroon:        var(--accent);
  --maroon-dark:   var(--accent-dark);

  /* === Typography — CHANGE FONT === */
  --font:          'Rubik', 'Heebo', sans-serif;  /* Hebrew: Rubik/Heebo. English: swap to your font */
  --text-xs:       0.75rem;   /* 12px */
  --text-sm:       0.875rem;  /* 14px */
  --text-base:     1rem;      /* 16px */
  --text-lg:       1.125rem;  /* 18px */
  --text-xl:       1.25rem;   /* 20px */
  --text-2xl:      1.5rem;    /* 24px */
  --text-3xl:      1.875rem;  /* 30px */
  --text-4xl:      2.25rem;   /* 36px */
  --text-5xl:      3rem;      /* 48px */

  /* === Spacing (4px base — no need to change) === */
  --space-1:       0.25rem;
  --space-2:       0.5rem;
  --space-3:       0.75rem;
  --space-4:       1rem;
  --space-5:       1.25rem;
  --space-6:       1.5rem;
  --space-8:       2rem;
  --space-10:      2.5rem;
  --space-12:      3rem;
  --space-16:      4rem;
  --space-20:      5rem;
  --space-24:      6rem;

  /* === Layout (rarely change) === */
  --max-w:         1200px;
  --max-w-narrow:  800px;
  --max-w-wide:    1400px;
  --radius:        8px;
  --radius-lg:     16px;
  --radius-full:   9999px;

  /* === Shadows === */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
  --shadow:        0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:     0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:     0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* === Transitions === */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration:      200ms;
  --duration-slow: 400ms;
}

/* === Font Faces — CHANGE FOR YOUR FONTS ===
   For Hebrew: keep Rubik + Heebo
   For English: replace with your chosen Google Font (download woff2) */

@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF;
}

@font-face {
  font-family: 'Heebo';
  src: url('/fonts/Heebo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F, U+0000-00FF;
}

/* ==================== DARK MODE ==================== */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --bg-alt: #16213e;
    --bg-warm: #1a1a2e;
    --text: #e0e0e0;
    --text-light: #a0a0a0;
    --text-muted: #8a8a8a;
    --border: #2a2a4a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);
    --highlight: #2a3a5a;
  }
}