/* Self-hosted fonts — the woff2 files below are expected in /assets/fonts/
   (exact file names + download links: src/assets/fonts/README.md).
   Until those files are added, the stacks fall back to system sans-serifs. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Core palette — maroon + gold + cream, warm & premium ---- */
  --color-primary: #241d1c;          /* warm near-black */
  --color-accent: #d1ad52;           /* gold — base */
  --color-brand: #5b2e2d;            /* maroon — base */
  --color-cream: #f9f6f1;

  /* Gold ramp */
  --color-accent-soft: #f3e8cf;                        /* pale gold wash (solid) */
  --color-accent-tint: rgba(209, 173, 82, 0.16);       /* gold hover wash */
  --color-accent-deep: #b89038;                        /* interactive gold */
  --color-accent-line: rgba(185, 144, 56, 0.45);       /* gold hairline */

  /* Maroon ramp */
  --color-brand-deep: #45201f;
  --color-brand-bright: #7d4745;
  --color-brand-soft: rgba(91, 46, 45, 0.06);
  --color-brand-line: rgba(91, 46, 45, 0.16);

  /* Warm neutrals */
  --color-cream-deep: #f2ecdf;
  --color-light: #fdfbf7;             /* warm white surface */
  --color-white: #ffffff;
  --color-text: #6e6862;              /* warm gray body text */
  --color-text-strong: #4a443f;
  --color-text-inverse: #f5efe3;
  --color-dark-card: #241d1c;
  --color-border: rgba(91, 46, 45, 0.13);
  --color-border-strong: rgba(91, 46, 45, 0.28);

  --font-latin: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Figtree", "Segoe UI", system-ui, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* ---- Signature gradients ---- */
  --gradient-gold: linear-gradient(135deg, #e2c06a 0%, #d1ad52 48%, #b89038 100%);
  --gradient-maroon: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-deep) 100%);
  --gradient-hero:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(209, 173, 82, 0.14), transparent 60%),
    linear-gradient(180deg, var(--color-light) 0%, var(--color-cream) 100%);
  --gradient-stage:
    radial-gradient(ellipse 80% 60% at 50% 38%, rgba(209, 173, 82, 0.14), transparent 70%),
    radial-gradient(ellipse 90% 50% at 50% 115%, rgba(91, 46, 45, 0.07), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, var(--color-cream) 100%);

  /* ---- Warm-tinted shadows ---- */
  --shadow-header: 0 1px 2px rgba(36, 29, 28, 0.05), 0 12px 32px -8px rgba(36, 29, 28, 0.08);
  --shadow-card: 0 1px 2px rgba(69, 32, 31, 0.05), 0 16px 36px -12px rgba(69, 32, 31, 0.10);
  --shadow-card-hover: 0 2px 6px rgba(69, 32, 31, 0.06), 0 26px 52px -12px rgba(69, 32, 31, 0.18);
  --shadow-gold: 0 10px 26px -6px rgba(184, 144, 56, 0.38);
  --shadow-gold-hover: 0 16px 34px -8px rgba(184, 144, 56, 0.5);
  --shadow-stage: 0 24px 60px -16px rgba(69, 32, 31, 0.14);

  --transition-base: 0.25s ease;
  --transition-lift: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.45s cubic-bezier(0.22, 1, 0.36, 1);

  --container: 72rem;
  --header-height: 5.25rem;
}