/* ═══════════════════════════════════════════════════
   NOON CALLIGRAPHER — DESIGN SYSTEM
   Phase 1: CSS Variables & Design Tokens
   Brand: #59924c (Noon Green)
═══════════════════════════════════════════════════ */

/* ─── Google Fonts ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Tajawal:wght@300;400;500;700;800&display=swap');

/* ─── Color Palette ─────────────────────────────── */
:root {
  /* Brand Green */
  --c-primary:        #59924c;
  --c-primary-dark:   #3d6b33;
  --c-primary-darker: #2a4d24;
  --c-primary-light:  #7ab86a;
  --c-primary-xlight: #e8f5e3;
  --c-primary-glass:  rgba(89, 146, 76, 0.12);
  --c-primary-glass2: rgba(89, 146, 76, 0.25);

  /* Accent Gold */
  --c-gold:           #c9a84c;
  --c-gold-light:     #f0dfa0;

  /* Neutrals */
  --c-dark:           #1a2e15;
  --c-dark2:          #243d1e;
  --c-text:           #2d3748;
  --c-text-muted:     #718096;
  --c-text-light:     #a0aec0;
  --c-border:         #d1e8cc;
  --c-border-light:   #edf7ea;
  --c-bg:             #f8fdf6;
  --c-bg2:            #f0f9ec;
  --c-white:          #ffffff;

  /* Status Colors */
  --c-success:        #38a169;
  --c-warning:        #d69e2e;
  --c-danger:         #e53e3e;
  --c-info:           #3182ce;

  /* Dark Mode (Admin uses dark sidebar) */
  --c-sidebar-bg:     #1a2e15;
  --c-sidebar-hover:  #243d1e;
  --c-sidebar-text:   #c6e8bc;
  --c-sidebar-active: #59924c;

  /* ─── Typography ──────────────────────────────── */
  --font-en:          'Plus Jakarta Sans', system-ui, sans-serif;
  --font-ar:          'Tajawal', 'Arabic UI Text', sans-serif;
  --font-base:        var(--font-en);

  /* Font Scale (Major Third 1.25) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */
  --text-hero:  clamp(2rem, 6vw, 4.5rem);

  /* ─── Spacing ─────────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* ─── Border Radius ───────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── Shadows ─────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-green: 0 8px 30px rgba(89,146,76,0.25);
  --shadow-green-sm: 0 4px 16px rgba(89,146,76,0.20);

  /* ─── Transitions ─────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* ─── Z-index Layers ──────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-modal:    400;
  --z-toast:    500;

  /* ─── Layout ──────────────────────────────────── */
  --nav-height:       72px;
  --nav-height-mob:   64px;
  --bottom-tab-h:     64px;
  --sidebar-w:        260px;
  --sidebar-w-collapsed: 68px;
  --container-max:    1280px;
  --container-wide:   1440px;
}

/* ─── RTL Font Swap ────────────────────────────── */
[lang="ar"],
:root[dir="rtl"] {
  --font-base: var(--font-ar);
}