/* =========================================================================
   Al Fahm — Design System
   Direction: Modern Arabesque + Religious Serene
   Palette: smoky earth, ivory, single discreet gold accent
   Typography: Fraunces (editorial serif) + Public Sans (body) + Noto Naskh Arabic
   ========================================================================= */

/* --- Fonts ---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..600,0..100&family=Public+Sans:wght@300;400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap");

/* --- Design Tokens -------------------------------------------------------- */
:root {
  /* Surfaces (smoky earth) */
  --fy-bg:            #0b110e;
  --fy-bg-2:          #10171336;
  --fy-surface:       #14201a;
  --fy-surface-2:     #1a2922;
  --fy-surface-3:     #22332b;

  /* Ink (warm ivory) */
  --fy-ink:           #f4eee2;
  --fy-ink-2:         #d8d2c4;
  --fy-ink-muted:     #9a948a;
  --fy-ink-faint:     #6b675e;

  /* Single accent: subtle gold filet */
  --fy-gold:          #c8a45c;
  --fy-gold-soft:     #dcc594;
  --fy-gold-deep:     #9c7d40;
  --fy-gold-veil:     rgba(200, 164, 92, 0.14);

  /* Sober status (muted, never neon) */
  --fy-success:       #8fb586;
  --fy-warning:       #d6a661;
  --fy-danger:        #c66a6a;
  --fy-info:          #8aa8b2;

  /* Borders */
  --fy-border:         rgba(244, 238, 226, 0.08);
  --fy-border-strong:  rgba(244, 238, 226, 0.16);
  --fy-border-gold:    rgba(200, 164, 92, 0.32);

  /* Typography */
  --fy-font-display:  "Fraunces", "Cormorant Garamond", "Iowan Old Style", Cambria, Georgia, serif;
  --fy-font-body:     "Public Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fy-font-arabic:   "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif;
  --fy-font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Type scale (senior-readable: body 17, generous line-height) */
  --fy-text-xs:       0.8125rem;   /* 13px */
  --fy-text-sm:       0.875rem;    /* 14px */
  --fy-text-base:     1rem;        /* 16px */
  --fy-text-md:       1.0625rem;   /* 17px body */
  --fy-text-lg:       1.1875rem;   /* 19px */
  --fy-text-xl:       1.375rem;    /* 22px */
  --fy-text-2xl:      1.75rem;     /* 28px */
  --fy-text-3xl:      2.375rem;    /* 38px */
  --fy-text-4xl:      3.25rem;     /* 52px */
  --fy-text-5xl:      4.25rem;     /* 68px landing hero */

  --fy-leading-tight:  1.15;
  --fy-leading-snug:   1.3;
  --fy-leading-normal: 1.55;
  --fy-leading-relaxed:1.7;
  --fy-tracking-tight: -0.015em;
  --fy-tracking-wide:  0.08em;

  /* Spacing scale (4-base, generous) */
  --fy-space-1: 4px;
  --fy-space-2: 8px;
  --fy-space-3: 12px;
  --fy-space-4: 16px;
  --fy-space-5: 24px;
  --fy-space-6: 32px;
  --fy-space-7: 48px;
  --fy-space-8: 64px;
  --fy-space-9: 96px;
  --fy-space-10: 128px;

  /* Radii */
  --fy-radius-xs: 4px;
  --fy-radius-sm: 8px;
  --fy-radius-md: 12px;
  --fy-radius-lg: 16px;
  --fy-radius-xl: 24px;
  --fy-radius-pill: 999px;

  /* Shadows (subtle, never plastic) */
  --fy-shadow-none:   none;
  --fy-shadow-sm:     0 1px 2px rgba(0,0,0,0.30);
  --fy-shadow-md:     0 6px 24px rgba(0,0,0,0.32);
  --fy-shadow-lg:     0 20px 60px rgba(0,0,0,0.42);
  --fy-shadow-gold:   0 0 0 1px var(--fy-border-gold), 0 8px 24px rgba(200,164,92,0.10);

  /* Motion */
  --fy-ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --fy-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --fy-duration-fast: 140ms;
  --fy-duration:      220ms;
  --fy-duration-slow: 420ms;

  /* Layout */
  --fy-container:     1180px;
  --fy-container-sm:  640px;
}

/* --- Base reset ----------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fy-font-body);
  font-size: var(--fy-text-md);
  line-height: var(--fy-leading-normal);
  color: var(--fy-ink);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(200,164,92,0.07), transparent 70%),
    linear-gradient(180deg, var(--fy-bg) 0%, #07100c 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "kern";
  min-height: 100vh;
}

html[dir="rtl"] body { font-family: var(--fy-font-arabic); }

::selection { background: var(--fy-gold-veil); color: var(--fy-ink); }

/* --- Typography utility classes ------------------------------------------ */
.fy-display {
  font-family: var(--fy-font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  letter-spacing: var(--fy-tracking-tight);
  line-height: var(--fy-leading-tight);
  color: var(--fy-ink);
}

.fy-eyebrow {
  font-family: var(--fy-font-body);
  font-size: var(--fy-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--fy-tracking-wide);
  font-weight: 600;
  color: var(--fy-gold);
}

.fy-h1 { font-family: var(--fy-font-display); font-weight: 400; font-size: var(--fy-text-4xl); line-height: var(--fy-leading-tight); letter-spacing: var(--fy-tracking-tight); margin: 0; }
.fy-h2 { font-family: var(--fy-font-display); font-weight: 400; font-size: var(--fy-text-3xl); line-height: var(--fy-leading-tight); letter-spacing: var(--fy-tracking-tight); margin: 0; }
.fy-h3 { font-family: var(--fy-font-display); font-weight: 500; font-size: var(--fy-text-2xl); line-height: var(--fy-leading-snug); margin: 0; }
.fy-h4 { font-family: var(--fy-font-body); font-weight: 600; font-size: var(--fy-text-xl); line-height: var(--fy-leading-snug); margin: 0; }
.fy-lead { font-size: var(--fy-text-lg); line-height: var(--fy-leading-relaxed); color: var(--fy-ink-2); }
.fy-body { font-size: var(--fy-text-md); line-height: var(--fy-leading-normal); color: var(--fy-ink-2); }
.fy-small { font-size: var(--fy-text-sm); color: var(--fy-ink-muted); }
.fy-mono { font-family: var(--fy-font-mono); font-size: 0.92em; letter-spacing: -0.01em; }

html[dir="rtl"] .fy-display,
html[dir="rtl"] .fy-h1,
html[dir="rtl"] .fy-h2,
html[dir="rtl"] .fy-h3 { font-family: var(--fy-font-arabic); font-weight: 500; }

/* --- Brand block ---------------------------------------------------------- */
.fy-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--fy-font-display);
  font-weight: 500;
  font-size: 1.32rem;
  letter-spacing: -0.005em;
  color: var(--fy-ink);
}
.fy-brand .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fy-gold);
  margin-inline-start: 2px;
  transform: translateY(-6px);
}
.fy-brand small {
  font-family: var(--fy-font-body);
  font-size: 0.72rem;
  letter-spacing: var(--fy-tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fy-ink-muted);
  margin-inline-start: 6px;
}

/* --- Gold filet (decorative divider) ------------------------------------- */
.fy-filet {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--fy-gold) 50%, transparent 100%);
  opacity: 0.55;
  margin: var(--fy-space-5) 0;
}
.fy-filet--short { max-width: 80px; margin-inline: auto; }

/* --- Geometric motif (very discreet, never full-bleed background) ------- */
.fy-motif {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  color: var(--fy-gold);
}

/* --- Surfaces ------------------------------------------------------------ */
.fy-surface {
  background: var(--fy-surface);
  border: 1px solid var(--fy-border);
  border-radius: var(--fy-radius-lg);
}
.fy-surface--elevated {
  background: linear-gradient(180deg, var(--fy-surface-2) 0%, var(--fy-surface) 100%);
  border-color: var(--fy-border-strong);
  box-shadow: var(--fy-shadow-md);
}
.fy-surface--gold {
  border-color: var(--fy-border-gold);
  box-shadow: var(--fy-shadow-gold);
}

.fy-card { padding: var(--fy-space-6); border-radius: var(--fy-radius-lg); }
.fy-card--lg { padding: var(--fy-space-7); }

/* --- Buttons ------------------------------------------------------------- */
.fy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  appearance: none;
  border: none;
  font-family: var(--fy-font-body);
  font-weight: 500;
  font-size: var(--fy-text-md);
  letter-spacing: 0.005em;
  padding: 13px 22px;
  border-radius: var(--fy-radius-md);
  cursor: pointer;
  transition: background var(--fy-duration) var(--fy-ease),
              color var(--fy-duration) var(--fy-ease),
              border-color var(--fy-duration) var(--fy-ease),
              transform 90ms var(--fy-ease);
  text-decoration: none;
  line-height: 1;
}
.fy-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--fy-gold-veil), 0 0 0 1px var(--fy-gold);
}
.fy-btn:active { transform: translateY(1px); }
.fy-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.fy-btn--primary {
  background: var(--fy-ink);
  color: #0b110e;
  border: 1px solid transparent;
}
.fy-btn--primary:hover { background: var(--fy-gold-soft); }

.fy-btn--gold {
  background: linear-gradient(180deg, var(--fy-gold-soft) 0%, var(--fy-gold) 100%);
  color: #1a1308;
  border: 1px solid var(--fy-gold-deep);
}
.fy-btn--gold:hover { filter: brightness(1.06); }

.fy-btn--ghost {
  background: transparent;
  color: var(--fy-ink);
  border: 1px solid var(--fy-border-strong);
}
.fy-btn--ghost:hover { border-color: var(--fy-gold); color: var(--fy-gold-soft); }

.fy-btn--link {
  background: transparent;
  color: var(--fy-gold);
  border: none;
  padding: 6px 0;
}
.fy-btn--link:hover { color: var(--fy-gold-soft); text-decoration: underline; text-underline-offset: 4px; }

.fy-btn--sm { font-size: var(--fy-text-sm); padding: 9px 16px; }
.fy-btn--lg { font-size: var(--fy-text-lg); padding: 16px 28px; }

/* --- Inputs -------------------------------------------------------------- */
.fy-field {
  display: block;
  margin-bottom: var(--fy-space-5);
}
.fy-label {
  display: block;
  font-family: var(--fy-font-body);
  font-size: var(--fy-text-xs);
  font-weight: 600;
  letter-spacing: var(--fy-tracking-wide);
  text-transform: uppercase;
  color: var(--fy-ink-2);
  margin-bottom: 8px;
}
.fy-input,
.fy-textarea,
.fy-select {
  display: block;
  width: 100%;
  font-family: var(--fy-font-body);
  font-size: var(--fy-text-md);
  line-height: 1.4;
  color: var(--fy-ink);
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--fy-border-strong);
  border-radius: var(--fy-radius-md);
  padding: 13px 16px;
  transition: border-color var(--fy-duration) var(--fy-ease),
              background var(--fy-duration) var(--fy-ease),
              box-shadow var(--fy-duration) var(--fy-ease);
}
.fy-input::placeholder { color: rgba(244,238,226,0.30); }
.fy-input:focus,
.fy-textarea:focus,
.fy-select:focus {
  outline: none;
  border-color: var(--fy-gold);
  background: rgba(0,0,0,0.42);
  box-shadow: 0 0 0 3px var(--fy-gold-veil);
}
.fy-hint { font-size: var(--fy-text-sm); color: var(--fy-ink-muted); margin: -8px 0 var(--fy-space-4) 0; line-height: var(--fy-leading-normal); }

/* --- Badges -------------------------------------------------------------- */
.fy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fy-font-body);
  font-size: var(--fy-text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 10px;
  border-radius: var(--fy-radius-pill);
  background: var(--fy-surface-2);
  border: 1px solid var(--fy-border-strong);
  color: var(--fy-ink-2);
}
.fy-badge--gold { color: var(--fy-gold); border-color: var(--fy-border-gold); background: rgba(200,164,92,0.06); }
.fy-badge--success { color: var(--fy-success); border-color: rgba(143,181,134,0.30); background: rgba(143,181,134,0.06); }
.fy-badge--danger { color: var(--fy-danger); border-color: rgba(198,106,106,0.30); background: rgba(198,106,106,0.06); }

/* --- Lang chip switcher -------------------------------------------------- */
.fy-langs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--fy-border);
  border-radius: var(--fy-radius-pill);
}
.fy-langs button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--fy-ink-muted);
  font-family: var(--fy-font-body);
  font-size: var(--fy-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: var(--fy-radius-pill);
  cursor: pointer;
  transition: background var(--fy-duration) var(--fy-ease), color var(--fy-duration) var(--fy-ease);
}
.fy-langs button:hover { color: var(--fy-ink); }
.fy-langs button.is-active { background: var(--fy-gold); color: #1a1308; }

/* --- Container ----------------------------------------------------------- */
.fy-container { max-width: var(--fy-container); margin-inline: auto; padding-inline: var(--fy-space-5); }
.fy-container--sm { max-width: var(--fy-container-sm); }

/* --- Stack / spacing helpers -------------------------------------------- */
.fy-stack > * + * { margin-top: var(--fy-space-4); }
.fy-stack-sm > * + * { margin-top: var(--fy-space-2); }
.fy-stack-lg > * + * { margin-top: var(--fy-space-6); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --fy-text-4xl: 2.4rem;
    --fy-text-5xl: 3rem;
  }
  .fy-card { padding: var(--fy-space-5); }
  .fy-card--lg { padding: var(--fy-space-6); }
}