/* =========================================
   Booka Theme – OFFICIAL Design System
   Version: 1.1 (Blue SaaS Identity)
========================================= */

:root {

  /* ================= Font ================= */
  --font-base: 'Cairo', sans-serif;

  /* ================= Brand / Primary ================= */
  --primary-600: #4F46E5;   /* CTA – Buttons */
  --primary-500: #6366F1;   /* Highlights */
  --primary-400: #818CF8;   /* Hover / Active */
  --primary-soft: #EEF2FF;  /* Soft backgrounds */

  /* ================= Dark / Neutral ================= */
  --dark-900: #0F172A;      /* Main headings */
  --dark-700: #334155;      /* Body text */

  /* ================= Backgrounds ================= */
  --bg-main:    #F8FAFC;    /* App background */
  --bg-surface: #FFFFFF;   /* Cards */
  --bg-soft:    #F9FAFB;   /* Sections */
  --bg-input:   #F3F4F6;   /* Inputs */

  /* ================= Text ================= */
  --text-primary: var(--dark-900);
  --text-body:    var(--dark-700);
  --text-muted:   #64748B;
  --text-inverse: #FFFFFF;

  /* ================= Borders & Radius ================= */
  --border-color: #E5E7EB;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  /* ================= Shadows ================= */
  --shadow-soft:   0 10px 30px rgba(15,23,42,.06);
  --shadow-medium: 0 20px 60px rgba(15,23,42,.08);

  /* ================= System States ================= */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --info:    #3B82F6;
}

/* ================= Global Base ================= */
body {
  font-family: var(--font-base);
  background: var(--bg-main);
  color: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ================= Links ================= */
a {
  color: var(--primary-600);
  text-decoration: none;
}

a:hover {
  opacity: 0.9;
}

/* ================= Headings ================= */
h1, h2, h3, h4, h5 {
  color: var(--text-primary);
  font-weight: 700;
}

/* ================= Buttons (Base) ================= */
.btn-primary {
  background: linear-gradient(
    135deg,
    var(--primary-600),
    var(--primary-500)
  );
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  opacity: 0.95;
}

.btn-outline {
  background: var(--primary-soft);
  color: var(--primary-600);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-md);
}

/* ================= Cards (Base) ================= */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}