/**
 * Design tokens — extracted verbatim from the Figma file "DXB Horse Riding Design".
 * Do not invent values here; every color/size traces back to a Figma style.
 */
:root {
  /* Brand — Foundation/p1 (brown) */
  --c-brown-900: #382C22;
  --c-brown-500: #856851;
  --c-brown-300: #AD9A8A;
  --c-brown-200: #C7BAAF;
  --c-tan-500:   #D4B89E; /* brown1-500 */

  /* Brand — Foundation/S1 (gold/sand) */
  --c-gold-300:  #C8A96A;
  --c-gold-200:  #D1B883;
  --c-gold-100:  #DFCDA9;
  --c-cream-50:  #FAF6F0;
  --c-cream-100: #EDE8DF;

  /* Accents */
  --c-star:      #EEC417; /* rating stars */
  --c-espresso:  #2F241F; /* deep brown panels */
  --c-danger:    #EA3A3D;

  /* Neutrals — Foundation/Black + Gray + White */
  --c-black-900: #000001;
  --c-black-800: #010102;
  --c-black-soft:#1A1A1A;
  --c-gray-800:  #656669;
  --c-gray-700:  #838387;
  --c-gray-600:  #A7A8AD;
  --c-gray-500:  #B8B9BE;
  --c-gray-400:  #C6C7CB;
  --c-gray-300:  #CFD0D3;
  --c-gray-200:  #DEDFE1;
  --c-gray-100:  #E9E9EB;
  --c-gray-50:   #F8F8F9;
  --c-white-600: #E4E4E4;
  --c-white:     #FFFFFF;

  /* Typography — actual fonts used in the page frames */
  --font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "DM Sans", var(--font-body);

  /* Type scale (px values from Figma text styles; rem base 16) */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;

  --lh-tight: 1.26;  /* Figma: 20px/25.2, 32px/40.3 → 1.26 */
  --lh-body: 1.26;
  --lh-relaxed: 1.5;

  /* Layout */
  --container: 1280px;
  --gutter: 80px;        /* desktop page margin (1440 frame) */
  --gutter-mobile: 16px; /* 390 frame margin */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-small: 0 1px 2px rgba(16, 24, 40, 0.05);
}