/**
 * MedNova Design Token System
 * ─────────────────────────────────────────────────────────────────────────────
 * Single source-of-truth CSS custom properties consumed by every MedNova view.
 * Laravel may override --mn-teal and --main via an inline <style> block in the
 * layout <head> using $setting->web_theme_color.
 *
 * Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6
 * ─────────────────────────────────────────────────────────────────────────────
 */

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

:root {

  /* ─── Brand Palette ────────────────────────────────────────────────────── */
  /* Req 1.1 — Deep Navy, Medical Teal, Soft Aqua, Light Mint */
  --mn-navy:        #0A1628;   /* Primary dark — nav, headings, footer       */
  --mn-teal:        #0D9488;   /* Medical Teal — CTA, links, active states   */
  --mn-aqua:        #38BDF8;   /* Soft Aqua — cards, highlights, accents     */
  --mn-mint:        #ECFDF5;   /* Light Mint — section backgrounds, success  */

  /* ─── Neutral Scale ────────────────────────────────────────────────────── */
  /* Req 1.1 — white/gray scale from #FFFFFF to #0F172A */
  --mn-white:       #FFFFFF;
  --mn-off-white:   #F8FAFC;
  --mn-gray-50:     #F1F5F9;
  --mn-gray-100:    #E2E8F0;
  --mn-gray-200:    #CBD5E1;
  --mn-gray-400:    #94A3B8;
  --mn-gray-600:    #475569;
  --mn-gray-800:    #1E293B;
  --mn-dark:        #0F172A;

  /* ─── Semantic Color Tokens ────────────────────────────────────────────── */
  --mn-text-primary:    var(--mn-navy);
  --mn-text-secondary:  var(--mn-gray-600);
  --mn-text-muted:      var(--mn-gray-400);

  --mn-bg-page:         var(--mn-white);
  --mn-bg-subtle:       var(--mn-off-white);
  --mn-bg-section:      var(--mn-mint);

  --mn-border:          var(--mn-gray-100);
  --mn-border-focus:    var(--mn-teal);

  /* ─── Status Colors ────────────────────────────────────────────────────── */
  --mn-success:     #10B981;
  --mn-warning:     #F59E0B;
  --mn-error:       #EF4444;
  --mn-info:        var(--mn-aqua);

  /* ─── Shadow Tokens ────────────────────────────────────────────────────── */
  /* Req 1.4 — soft, layered; no pure black (#000000) in any shadow value    */
  --mn-shadow-sm:   0 1px 3px rgba(10, 22, 40, 0.06),
                    0 1px 2px rgba(10, 22, 40, 0.04);

  --mn-shadow-md:   0 4px 16px rgba(10, 22, 40, 0.08),
                    0 2px 6px  rgba(10, 22, 40, 0.05);

  --mn-shadow-lg:   0 12px 40px rgba(10, 22, 40, 0.10),
                    0 4px  12px rgba(10, 22, 40, 0.06);

  --mn-shadow-card: 0 2px 12px rgba(13, 148, 136, 0.08),
                    0 1px 4px  rgba(10, 22, 40, 0.05);

  /* ─── Spacing Scale (8px base unit) ───────────────────────────────────── */
  /* Req 1.2 — 4px through 128px */
  --mn-space-1:   4px;    /*  × 0.5 */
  --mn-space-2:   8px;    /*  × 1   */
  --mn-space-3:   12px;   /*  × 1.5 */
  --mn-space-4:   16px;   /*  × 2   */
  --mn-space-6:   24px;   /*  × 3   */
  --mn-space-8:   32px;   /*  × 4   */
  --mn-space-10:  40px;   /*  × 5   */
  --mn-space-12:  48px;   /*  × 6   */
  --mn-space-16:  64px;   /*  × 8   */
  --mn-space-20:  80px;   /*  × 10  */
  --mn-space-24:  96px;   /*  × 12  */
  --mn-space-32:  128px;  /*  × 16  */

  /* ─── Border Radius Tokens ─────────────────────────────────────────────── */
  /* Req 1.3 */
  --mn-radius-btn:   16px;
  --mn-radius-input: 16px;
  --mn-radius-card:  24px;
  --mn-radius-hero:  32px;
  --mn-radius-img:   24px;
  --mn-radius-modal: 28px;
  --mn-radius-badge: 8px;
  --mn-radius-pill:  999px;

  /* ─── Typography: Font Families ────────────────────────────────────────── */
  /* Req 1.5 — Plus Jakarta Sans loaded via Google Fonts with display=swap    */
  --mn-font:       'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --mn-font-mono:  'IBM Plex Mono', monospace;

  /* ─── Typography: Size Scale (clamp-based) ─────────────────────────────── */
  /* Req 1.6 — Display → Caption editorial hierarchy */
  --mn-text-display: clamp(36px, 4vw, 56px);    /* Display: 36–56px (was 48–72) */
  --mn-text-h1:      clamp(28px, 3vw, 42px);    /* H1:      28–42px (was 36–48) */
  --mn-text-h2:      clamp(22px, 2.2vw, 32px);  /* H2:      22–32px (was 28–36) */
  --mn-text-h3:      clamp(18px, 1.8vw, 24px);  /* H3:      18–24px (was 22–28) */
  --mn-text-h4:      18px;                        /* H4:      18px (was 20px)    */
  --mn-text-body:    15px;                        /* Body:    15px               */
  --mn-text-sm:      13px;                        /* Small:   13px               */
  --mn-text-xs:      11px;                        /* Caption: 11px               */

  /* ─── Typography: Line Heights ─────────────────────────────────────────── */
  --mn-leading-tight:   1.2;
  --mn-leading-snug:    1.35;
  --mn-leading-normal:  1.6;
  --mn-leading-relaxed: 1.8;

  /* ─── Typography: Font Weights ─────────────────────────────────────────── */
  --mn-font-regular:   400;
  --mn-font-medium:    500;
  --mn-font-semibold:  600;
  --mn-font-bold:      700;
  --mn-font-extrabold: 800;

}

/* ─── Base Document Defaults ───────────────────────────────────────────────── */
/* Applies the token system to all elements by default */

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

html {
  font-family: var(--mn-font);
  font-size: var(--mn-text-body);
  line-height: var(--mn-leading-normal);
  color: var(--mn-text-primary);
  background-color: var(--mn-bg-page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─── RTL Support ──────────────────────────────────────────────────────────── */
/* Req 1.7 — direction: rtl when $setting->is_rtl == '1' (set on <html dir>)   */
/* All layout CSS uses logical properties (margin-inline-*, padding-inline-*)   */
/* so no separate RTL stylesheet is needed.                                      */
[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}

/* ─── Part 6: Final QA — Global Easing & Transition Tokens ────────────────── */
:root {
  /* Easing tokens — consistent with GSAP power2.out/power3.out feel */
  --mn-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --mn-ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --mn-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --mn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duration tokens */
  --mn-duration-fast:   150ms;
  --mn-duration-base:   200ms;
  --mn-duration-slow:   300ms;
  --mn-duration-slower: 500ms;

  /* Overlay z-index scale */
  --mn-z-nav:      900;
  --mn-z-dropdown: 1000;
  --mn-z-overlay:  1040;
  --mn-z-drawer:   1050;
  --mn-z-modal:    1060;
  --mn-z-toast:    9999;
}

/* ─── Apply easing tokens globally ─────────────────────────────────────────── */
a, button, input, select, textarea, [role="button"] {
  transition-timing-function: var(--mn-ease-out);
}
