/* ============================================================
   BuyInSaudi — Design Tokens
   Arabic-first. RTL is the default state.
   Source of truth: Design-Reference/assets/colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: "Reem Kufi Fun";
  src: url("/fonts/ReemKufiFun-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/fonts/NotoNaskhArabic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Vibes";
  src: url("/fonts/Vibes-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
     COLOR — Brand Core (warm clay palette)
     ---------------------------------------------------------- */
  --bis-clay:     #9D6737;
  --bis-clay-900: #2E1F12;
  --bis-clay-800: #3F2818;
  --bis-clay-700: #6E4524;
  --bis-clay-600: #845430;
  --bis-clay-500: #B58963;
  --bis-clay-400: #D2B190;
  --bis-clay-300: #E6D2B8;
  --bis-clay-200: #F1E4D2;
  --bis-clay-100: #F8F0E2;

  /* Saudi flag green — the only non-warm colour */
  --bis-saudi-green:     #006C35;
  --bis-saudi-green-700: #00582B;
  --bis-saudi-green-500: #1A8A4F;
  --bis-saudi-green-100: #E5F2EC;

  /* ----------------------------------------------------------
     COLOR — Neutrals (warm-tuned, never cool grey)
     ---------------------------------------------------------- */
  --bis-white:        #FFFFFF;
  --bis-paper:        #FAF6EF;
  --bis-sand:         #EFE6D6;
  --bis-line:         #E5DBC9;
  --bis-line-strong:  #C9BCA1;
  --bis-ink-900:      #2E1F12;
  --bis-ink-700:      #4A3A2A;
  --bis-ink-500:      #6F5F4E;
  --bis-ink-400:      #9C8C7B;
  --bis-ink-300:      #C7BAA9;

  /* ----------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------- */
  --bis-danger:       #B5322B;
  --bis-heart:        #E7322B;
  --bis-bg:           var(--bis-paper);
  --bis-fg:           var(--bis-ink-900);
  --bis-fg-muted:     var(--bis-ink-500);
  --bis-fg-onDark:    #F5F1E8;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------- */
  --font-display: "Reem Kufi Fun", "Tajawal", system-ui, sans-serif;
  --font-body:    "Noto Naskh Arabic", "Reem Kufi Fun", system-ui, sans-serif;
  --font-latin:   "Inter", system-ui, -apple-system, sans-serif;
  --font-accent:  "Vibes", "Inter", cursive;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(46,31,18,.06), 0 1px 1px rgba(46,31,18,.04);
  --shadow-2: 0 6px 16px -4px rgba(46,31,18,.12), 0 2px 4px rgba(46,31,18,.06);
  --shadow-3: 0 18px 40px -12px rgba(46,31,18,.20), 0 6px 12px rgba(46,31,18,.07);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --ease:        cubic-bezier(.2, 0, 0, 1);
  --ease-emph:   cubic-bezier(.2, 0, 0, 1.08);
}