/* ######### FONT IMPORTS ######### */

/* Solaiman Lipi */
@import url("https://fonts.maateen.me/solaiman-lipi/font.css");

/* Playfair Display */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

/* Scheherazade New */
@import url("https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap");

/* ######### CSS VARIABLES ######### */
:root {
  --bg: #faf7f2;
  /* Backgrounds */
  --color-bg: #faf7f2;
  --color-bg-secondary: #f3eee7;
  --color-surface: #ffffff;
  --color-surface-hover: #f7f4ef;

  /* Text */
  --color-text: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;

  /* Borders */
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* Brand */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #dbeafe;

  /* Status */
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;

  --color-warning: #f59e0b;
  --color-warning-soft: #fef3c7;

  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;

  /* Misc */
  --shadow-color: rgb(0 0 0 / 0.08);
}

:root.dark {
  /* Backgrounds */
  --color-bg: #111827;
  --color-bg-secondary: #1a2332;
  --color-surface: #1f2937;
  --color-surface-hover: #2a3444;

  /* Text */
  --color-text: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-muted: #9ca3af;

  /* Borders */
  --color-border: #374151;
  --color-border-strong: #4b5563;

  /* Brand */
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-soft: #1e3a8a;

  /* Status */
  --color-success: #22c55e;
  --color-success-soft: #14532d;

  --color-warning: #fbbf24;
  --color-warning-soft: #78350f;

  --color-danger: #ef4444;
  --color-danger-soft: #7f1d1d;

  /* Misc */
  --shadow-color: rgb(0 0 0 / 0.35);
}

/* ######### GLOBAL #########*/
* {
  margin: 0;
  padding: 0;
  transition: 0.2s ease;
}

body {
  font-family: "Playfair Display", "SolaimanLipi", serif;
  background-color: var(--color-bg);
  color: var(--color-text);
}

h1 {
  font-family: "Playfair Display", "SolaimanLipi", serif;
}

/* ######### Homepage ######### */
.hero-area {
  text-align: center;
}

.hero-area h1 {
  color: var(--cream-dark-1);
}

.inner-container {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-hover);
}