/* ------------------------------------------------------------------
   Lamsa Design System — Colors & Type
   --------------------------------------------------------------------
   Lamsa (لمسة) — a Saudi-Arabic-first beauty-services marketplace.
   RTL-by-default. Bold pink, deep wine, and soft pink-cream cards.
   ------------------------------------------------------------------ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Expo Arabic";
  src: url("./fonts/ExpoArabic-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("./fonts/ExpoArabic-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("./fonts/ExpoArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("./fonts/ExpoArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Expo Arabic";
  src: url("./fonts/ExpoArabic-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLORS — raw palette
     ============================================================ */

  /* Brand pink — the hero color. Used for primary buttons, headers,
     accents, key labels, CTAs. */
  --pink-50:  #FFEFF5;
  --pink-100: #FFD6E5;
  --pink-200: #FBBBD2;
  --pink-300: #F58CB5;
  --pink-400: #F25C9B;
  --pink-500: #E84287;  /* PRIMARY — rgb(232,66,135) */
  --pink-600: #EC2175;  /* gradient stop — rgb(236,33,117) */
  --pink-700: #F3347F;  /* gradient stop — rgb(243,52,127) */

  /* Wine / burgundy — for primary text on light surfaces and for the
     subtle wine-shadow used under cards. */
  --wine-900: #4D0825;  /* rgb(77,8,37) — primary text */
  --wine-800: #6A1B3B;
  --wine-700: #84305F;

  /* Pink-cream neutrals — the "warm grey" of the brand. Borders,
     dividers, secondary text, placeholders, empty-state hints. */
  --neutral-100: #FFFFFF;
  --neutral-200: #F2EEF0;  /* rgb(242,238,240) — subtle border */
  --neutral-300: #D5C7CD;  /* rgb(213,199,205) — placeholder text */
  --neutral-400: #B0A1A8;
  --neutral-900: #000000;

  /* Semantic */
  --success-500: #12C54B;   /* rgb(18,197,75) */
  --success-50:  #E7F9EE;   /* tinted bg for "confirmed" pills */
  --error-500:   #C51212;   /* rgb(197,18,18) */
  --info-500:    #1257C5;   /* rgb(18,87,197) */
  --warn-500:    #ECA842;   /* rgb(236,168,66) — star ratings */

  /* ============================================================
     SEMANTIC TOKENS — use these, not the raw palette
     ============================================================ */

  /* Backgrounds */
  --bg-app:        #FFFFFF;
  --bg-surface:    #FFFFFF;        /* cards */
  --bg-muted:      rgba(77,8,37,0.04);  /* inert "non-active" pills */
  --bg-hero:       var(--pink-500); /* pink header section */

  /* Foregrounds */
  --fg-strong:     var(--wine-900);   /* primary text on white */
  --fg-default:    var(--wine-900);
  --fg-muted:      var(--neutral-300); /* secondary text, placeholders */
  --fg-on-pink:    #FFFFFF;            /* text on pink bg */
  --fg-on-pink-muted: rgba(255,255,255,0.7);
  --fg-accent:     var(--pink-500);    /* hyperlink / "عرض الكل" */

  /* Borders */
  --border-default: rgba(213,199,205,0.2); /* card outline */
  --border-input:   #D5C7CD;               /* input outline */
  --border-strong:  var(--pink-500);

  /* Shadows — all are PINK GLOWS or soft wine drops, never grey */
  --shadow-pink-soft:   0 0 14px 0 rgba(232,66,135,0.20);
  --shadow-pink-medium: 0 0 24px 0 rgba(232,66,135,0.24);
  --shadow-pink-strong: 0 0 14px 0 rgba(232,66,135,0.40);
  --shadow-pink-bloom:  0 0 144px 0 rgba(232,66,135,0.20); /* huge hero bloom */
  --shadow-pink-pulse:  0 0 14px 0 rgba(232,66,135,0.34);
  --shadow-pink-glow:   0 0 64px 0 rgba(232,66,135,0.40);
  --shadow-card-wine:   0 0 24px 0 rgba(77,8,37,0.15);
  --shadow-card-faint:  0 0 14px 0 rgba(77,8,37,0.04);

  /* Gradients */
  --gradient-pink: linear-gradient(180deg, #F3347F 0%, #EC2175 30%, #E84287 100%);
  --gradient-fade-to-white: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;   /* buttons, inputs */
  --radius-lg: 20px;
  --radius-xl: 24px;   /* feature cards */
  --radius-2xl: 32px;  /* large cards, navbar pill */
  --radius-pill: 999px;

  /* Spacing scale (4-pt) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 52px;

  /* Type — family */
  --font-family: "Expo Arabic", "Tajawal", system-ui, -apple-system,
                 "Segoe UI", sans-serif;

  /* Type — semantic
     Lamsa uses tight 100% line-heights on display text and 16/14px body. */
  --font-display:   700 28px/1.0 var(--font-family);  /* screen titles */
  --font-h1:        700 26px/1.0 var(--font-family);
  --font-h2:        700 24px/1.0 var(--font-family);
  --font-h3:        700 20px/1.0 var(--font-family);  /* section title */
  --font-button:    700 22px/1.0 var(--font-family);
  --font-button-sm: 700 16px/1.0 var(--font-family);
  --font-input:     400 20px/1.0 var(--font-family);
  --font-label:     500 20px/1.0 var(--font-family);  /* input label */
  --font-body-lg:   500 18px/1.3 var(--font-family);
  --font-body:      400 16px/1.4 var(--font-family);
  --font-body-bold: 700 16px/1.4 var(--font-family);
  --font-caption:   400 14px/1.3 var(--font-family);
  --font-caption-bold: 700 14px/1.3 var(--font-family);
  --font-helper:    400 16px/1.0 var(--font-family);
  --font-micro:     700 12px/1.0 var(--font-family);  /* nav label */
}

/* ============================================================
   Base / utility classes
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  color: var(--fg-default);
  background: var(--bg-app);
  margin: 0;
  direction: rtl;          /* Lamsa is Arabic-first */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Headings */
.ls-display { font: var(--font-display); color: var(--fg-strong); }
.ls-h1      { font: var(--font-h1);      color: var(--fg-strong); }
.ls-h2      { font: var(--font-h2);      color: var(--fg-strong); }
.ls-h3      { font: var(--font-h3);      color: var(--fg-strong); }
.ls-body    { font: var(--font-body);    color: var(--fg-default); }
.ls-body-lg { font: var(--font-body-lg); color: var(--fg-default); }
.ls-caption { font: var(--font-caption); color: var(--fg-muted); }
.ls-label   { font: var(--font-label);   color: var(--fg-strong); }
.ls-link    { font: var(--font-caption-bold); color: var(--fg-accent); cursor: pointer; }