/* =====================================================================
   DERMOSA — Design Tokens (single source of truth)
   Every module/plugin built later MUST consume these variables so the
   whole project stays one coherent design system.
   ===================================================================== */

:root {
  /* ---- Brand palette (locked by spec) ---- */
  --drm-primary:        #6c1410; /* deep oxblood — main accent            */
  --drm-primary-700:    #560f0c; /* pressed/active state                  */
  --drm-primary-050:    #f6eceb; /* primary tint surface (chips, hovers)  */
  --drm-comp-warm:      #fff2ea; /* warm off-white — sparing use only     */
  --drm-comp-cool:      #f4f8fb; /* cool off-white — sparing use only     */
  --drm-accent-taupe:   #9e8c88;
  --drm-accent-rose:    #d5c2bc;

  /* ---- Neutrals / text ---- */
  --drm-bg:             #ffffff; /* enforced page background              */
  --drm-surface:        #ffffff;
  --drm-surface-2:      #fafafa; /* faint card lift, still essentially white */
  --drm-border:         #ececec;
  --drm-border-strong:  #dcdcdc;
  --drm-text:           #4d4d4d; /* body / secondary                      */
  --drm-text-strong:    #1e1e1e; /* headings                              */
  --drm-text-muted:     #8a8a8a;

  /* ---- Semantic ---- */
  --drm-success:        #2e7d4f;
  --drm-danger:         #b3261e;
  --drm-sale:           #6c1410; /* discount badges reuse brand           */
  --drm-oos:            #8a8a8a; /* out-of-stock                          */

  /* ---- Unified corner radius (soft / fashion-grade) ---- */
  --drm-r-xs: 8px;
  --drm-r-sm: 12px;
  --drm-r-md: 16px;   /* default module/card radius                       */
  --drm-r-lg: 22px;
  --drm-r-pill: 999px;

  /* ---- Spacing scale ---- */
  --drm-sp-1: 4px;
  --drm-sp-2: 8px;
  --drm-sp-3: 12px;
  --drm-sp-4: 16px;
  --drm-sp-5: 20px;
  --drm-sp-6: 24px;
  --drm-sp-8: 32px;
  --drm-sp-10: 40px;

  /* ---- Mobile module side margin (locked: 15px each side) ---- */
  --drm-mobile-gutter: 15px;

  /* ---- Boxed desktop container ---- */
  --drm-container: 1500px;

  /* ---- Elevation (subtle, app-grade) ---- */
  --drm-shadow-sm: 0 1px 2px rgba(30,30,30,.05), 0 1px 3px rgba(30,30,30,.04);
  --drm-shadow-md: 0 4px 16px rgba(30,30,30,.07);
  --drm-shadow-lg: 0 12px 40px rgba(30,30,30,.10);

  /* ---- Motion ---- */
  --drm-ease: cubic-bezier(.22,.61,.36,1);
  --drm-fast: 140ms;
  --drm-base: 240ms;
  --drm-slow: 420ms;

  /* ---- Type ---- */
  /* The modular font family. Weights are loaded from the font module
     (inc/fonts.php). If the admin replaces the family, only --drm-font
     changes and the whole site follows. System fallbacks keep the page
     readable before WOFF2 paints (no FOIT). */
  --drm-font: "Dermosa", "Vazirmatn", "IRANSansX", "Segoe UI", Tahoma, system-ui, sans-serif;
  --drm-fs-12: .75rem;
  --drm-fs-13: .8125rem;
  --drm-fs-14: .875rem;
  --drm-fs-16: 1rem;     /* base — also the iOS no-zoom input minimum */
  --drm-fs-18: 1.125rem;
  --drm-fs-20: 1.25rem;
  --drm-fs-24: 1.5rem;
  --drm-fs-30: 1.875rem;
  --drm-lh-tight: 1.25;
  --drm-lh-body: 1.7;

  /* ---- Z-index ladder ---- */
  --drm-z-header: 100;
  --drm-z-bottomnav: 200;
  --drm-z-overlay: 1000;
  --drm-z-toast: 1100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --drm-fast: 0ms; --drm-base: 0ms; --drm-slow: 0ms; }
}