/* ============================================
   Bebeto — Design Tokens
   Color space: OKLCH throughout.
   Palette: ivory/blush base tinted toward the
   brand's pink, soft pastel pink primary accent,
   soft pastel blue secondary accent.
   ============================================ */

/* ---------- Self-hosted fonts ----------
   Drop Marhey-{Regular,Medium,SemiBold,Bold}.woff2 and
   Tajawal-{Regular,Medium,Bold}.woff2 into assets/fonts/.
   Until then, the stack below falls back to the system
   sans-serif — nothing breaks, it just won't match exactly. */
@font-face {
  font-family: "Marhey";
  src: url("../fonts/Marhey-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marhey";
  src: url("../fonts/Marhey-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marhey";
  src: url("../fonts/Marhey-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Marhey";
  src: url("../fonts/Marhey-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color: Brand ---------- */
  --color-primary: oklch(54% 0.17 14);          /* mature rose — primary CTAs */
  --color-primary-hover: oklch(48% 0.18 14);    /* hover/active state */
  --color-primary-tint: oklch(94% 0.03 16);     /* blush pink — badges, soft fills */
  --color-primary-tint-strong: oklch(89% 0.05 16); /* deeper blush — hover on tints */

  --color-accent: oklch(52% 0.095 240);         /* soft mature blue — trust, links */
  --color-accent-hover: oklch(45% 0.1 240);
  --color-accent-tint: oklch(94% 0.025 235);    /* pale blue — badges, tiles */
  --color-accent-tint-strong: oklch(89% 0.04 235);

  --color-gold: oklch(78% 0.1 75);              /* warm gold — bestseller accents */
  --color-gold-tint: oklch(95% 0.035 80);

  /* ---------- Color: Neutrals (warm-tinted toward brand hue) ---------- */
  --color-bg: oklch(97.8% 0.009 35);            /* ivory page background */
  --color-surface: oklch(99.3% 0.004 35);       /* card surface, near-white */
  --color-surface-alt: oklch(95.5% 0.014 30);   /* alternating section bg */
  --color-surface-sunken: oklch(92.5% 0.018 28);/* deeper recessed surface */
  --color-border: oklch(89% 0.015 30);          /* hairline borders */
  --color-border-strong: oklch(82% 0.02 28);

  --color-ink: oklch(27% 0.02 35);              /* warm charcoal — body text */
  --color-ink-soft: oklch(40% 0.02 35);         /* secondary headings */
  --color-muted: oklch(50% 0.022 35);           /* meta text, captions */

  /* ---------- Color: On-fill text ---------- */
  --color-on-primary: oklch(99% 0.005 16);
  --color-on-accent: oklch(99% 0.005 235);
  --color-on-dark: oklch(98% 0.006 35);

  /* ---------- Color: Semantic ---------- */
  --color-success: oklch(56% 0.13 152);
  --color-success-tint: oklch(94% 0.04 152);
  --color-focus: oklch(56% 0.09 240);

  /* ---------- Typography ---------- */
  --font-heading: "Marhey", "Tajawal", sans-serif;
  --font-body: "Marhey", "Tajawal", sans-serif;

  /* Fixed body sizes */
  --text-xs: 0.8125rem;   /* 13px — fine print */
  --text-sm: 0.9375rem;   /* 15px — captions, meta */
  --text-base: 1rem;      /* 16px — body */
  --text-lg: 1.125rem;    /* 18px — lead paragraphs */

  /* Fluid heading sizes */
  --text-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);     /* card titles, h5 */
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);       /* h4 */
  --text-3xl: clamp(1.75rem, 1.45rem + 1.6vw, 2.5rem);     /* h3 / section titles */
  --text-4xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);      /* h2 */
  --text-5xl: clamp(2.75rem, 1.9rem + 4.2vw, 4.5rem);      /* h1 / hero */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.7;
  --leading-relaxed: 1.85;

  --tracking-tight: -0.01em;

  /* ---------- Spacing (4pt base) ---------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */

  --section-padding-y: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  --section-padding-x: clamp(1.25rem, 1rem + 3vw, 3rem);
  --container-max: 80rem; /* 1280px */
  --container-narrow: 46rem; /* 736px — about/testimonial copy measure */

  /* ---------- Radii ---------- */
  --radius-sm: 0.625rem;  /* 10px */
  --radius-md: 1.25rem;   /* 20px */
  --radius-lg: 1.75rem;   /* 28px */
  --radius-xl: 2.5rem;    /* 40px */
  --radius-pill: 999px;

  /* ---------- Shadows (very subtle) ---------- */
  --shadow-sm: 0 1px 2px oklch(30% 0.03 30 / 0.05);
  --shadow-md: 0 6px 20px oklch(30% 0.03 30 / 0.06), 0 1px 3px oklch(30% 0.03 30 / 0.05);
  --shadow-lg: 0 16px 40px oklch(30% 0.03 30 / 0.09), 0 2px 8px oklch(30% 0.03 30 / 0.05);
  --shadow-glow-primary: 0 8px 28px oklch(54% 0.17 14 / 0.22);

  /* ---------- Motion ---------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
  --duration-slower: 760ms;

  /* ---------- Layout ---------- */
  --header-height: 4.5rem;

  /* ---------- Z-index scale ---------- */
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-toast: 300;
  --z-tooltip: 400;
}