/* ================================================================
   FLOWERP THEME — BRAND TOKENS  (flowerp_brand.css)
   ALHADDAQ Information Technology · flowerp.one
   Frappe v15 / ERPNext v15 — Enterprise Design System

   LOAD ORDER (see hooks.py): brand → theme → v15 → components → dynamic
   This layer defines the design tokens only. It is intentionally
   free of component rules so the dynamic CSS (generated from the
   FlowERP Theme Settings DocType) can override --brand / fonts /
   layout dimensions without specificity battles.
   ================================================================ */

/* ── Web fonts + icon font ──────────────────────────────────────
   Vendored locally (no CDN / offline-safe). The font binaries live
   in public/fonts; the @font-face + icon-glyph rules in these two
   stylesheets. IBM Plex blocks keep their unicode-range, so browsers
   only fetch the subsets actually rendered. */
@import url("/assets/flowerp_theme/css/flowerp_fonts.css");
@import url("/assets/flowerp_theme/css/tabler-icons.min.css");

/* ── DESIGN TOKENS ── */
:root {
  /* Brand */
  --fp-brand:         #6BCD7A;
  --fp-brand-600:     #4aa85a;
  --fp-brand-700:     #2d7a3d;
  /* Light tints derive from --fp-brand so a single brand-color change
     (from Theme Settings) cascades everywhere. Solid hex first as a
     fallback for engines without color-mix(). */
  --fp-brand-100:     #edf7ef;
  --fp-brand-100:     color-mix(in srgb, var(--fp-brand) 10%, #fff);
  --fp-brand-200:     #d0efd5;
  --fp-brand-200:     color-mix(in srgb, var(--fp-brand) 22%, #fff);
  --fp-brand-300:     #b8e8c0;
  --fp-brand-300:     color-mix(in srgb, var(--fp-brand) 34%, #fff);

  /* Neutrals — refined grey scale */
  --fp-slate-50:      #F8FAFC;
  --fp-slate-100:     #F1F5F9;
  --fp-slate-200:     #E2E8F0;
  --fp-slate-300:     #CBD5E1;
  --fp-slate-400:     #94A3B8;
  --fp-slate-500:     #64748B;
  --fp-slate-600:     #475569;
  --fp-slate-700:     #334155;
  --fp-slate-800:     #1E293B;
  --fp-slate-900:     #0F172A;

  /* Semantic surfaces */
  --fp-bg:            #F8FAFC;
  --fp-surface:       #FFFFFF;
  --fp-surface-2:     #F8FAFC;
  --fp-surface-3:     #F1F5F9;
  --fp-border:        #E2E8F0;
  --fp-border-2:      #CBD5E1;
  --fp-border-focus:  #6BCD7A;

  /* Text */
  --fp-text-primary:    #0F172A;
  --fp-text-secondary:  #475569;
  --fp-text-tertiary:   #94A3B8;
  --fp-text-on-brand:   #ffffff;

  /* Status */
  --fp-green-bg:   #DCFCE7; --fp-green-border: #86EFAC; --fp-green-text:  #166534;
  --fp-amber-bg:   #FEF9C3; --fp-amber-border: #FDE047; --fp-amber-text:  #854D0E;
  --fp-red-bg:     #FEE2E2; --fp-red-border:   #FCA5A5; --fp-red-text:    #991B1B;
  --fp-blue-bg:    #DBEAFE; --fp-blue-border:  #93C5FD; --fp-blue-text:   #1E40AF;
  --fp-purple-bg:  #EDE9FE; --fp-purple-border:#C4B5FD; --fp-purple-text: #5B21B6;
  --fp-slate-bg:   #F1F5F9; --fp-slate-border: #CBD5E1; --fp-slate-text:  #475569;

  /* Elevation / Shadows */
  --fp-shadow-xs:  0 1px 2px rgba(15,23,42,.04);
  --fp-shadow-sm:  0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
  --fp-shadow-md:  0 4px 6px rgba(15,23,42,.05), 0 2px 4px rgba(15,23,42,.04);
  --fp-shadow-lg:  0 10px 15px rgba(15,23,42,.07), 0 4px 6px rgba(15,23,42,.05);
  --fp-shadow-xl:  0 20px 25px rgba(15,23,42,.08), 0 8px 10px rgba(15,23,42,.05);
  --fp-shadow-brand: 0 4px 14px rgba(107,205,122,.30);

  /* Radius */
  --fp-r-xs:  3px;
  --fp-r-sm:  6px;
  --fp-r-md:  8px;
  --fp-r-lg:  12px;
  --fp-r-xl:  16px;
  --fp-r-2xl: 20px;
  --fp-r-full:9999px;

  /* Spacing */
  --fp-space-1:  4px;  --fp-space-2: 8px;  --fp-space-3: 12px; --fp-space-4: 16px;
  --fp-space-5: 20px; --fp-space-6: 24px; --fp-space-8: 32px;

  /* Typography */
  --fp-font:       'IBM Plex Sans Arabic','IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --fp-font-mono:  'IBM Plex Mono','Courier New',monospace;
  --fp-text-xs:    11px; --fp-text-sm: 12px; --fp-text-base: 13px;
  --fp-text-md:    14px; --fp-text-lg: 16px; --fp-text-xl: 20px;
  --fp-text-2xl:   24px; --fp-text-3xl: 30px;

  /* Transitions */
  --fp-ease:       cubic-bezier(.16,1,.3,1);
  --fp-t-fast:     120ms;
  --fp-t-base:     180ms;
  --fp-t-slow:     280ms;

  /* Layout */
  --fp-sidebar-w:    248px;
  --fp-topbar-h:     54px;

  /* ── Bridge into Frappe v15's own design variables ──
     Frappe desk reads these; remapping them here shifts the whole
     desk palette toward the FlowERP brand even before component
     overrides apply. */
  --primary:            var(--fp-brand);
  --primary-color:      var(--fp-brand);
  --brand-color:        var(--fp-brand);
  --btn-primary:        var(--fp-brand);
  --bg-color:           var(--fp-bg);
  --fg-color:           var(--fp-surface);
  --navbar-bg:          var(--fp-surface);
  --card-bg:            var(--fp-surface);
  --control-bg:         var(--fp-surface-2);
  --border-color:       var(--fp-border);
  --text-color:         var(--fp-text-primary);
  --text-muted:         var(--fp-text-tertiary);
  --navbar-height:      var(--fp-topbar-h);
}

/* ── DARK MODE ──
   Activated via [data-theme="dark"] on <html>. Frappe v15 also
   supports its own [data-theme-mode]; we mirror both. */
[data-theme="dark"],
[data-theme-mode="dark"] {
  --fp-brand:         #6BCD7A;
  --fp-brand-600:     #86EFAC;
  --fp-brand-700:     #BBF7D0;
  /* Dark-mode tints derive from --fp-brand mixed toward black. */
  --fp-brand-100:     #052e16;
  --fp-brand-100:     color-mix(in srgb, var(--fp-brand) 16%, #000);
  --fp-brand-200:     #14532d;
  --fp-brand-200:     color-mix(in srgb, var(--fp-brand) 28%, #000);
  --fp-brand-300:     #166534;
  --fp-brand-300:     color-mix(in srgb, var(--fp-brand) 40%, #000);

  --fp-bg:            #080C12;
  --fp-surface:       #0F1620;
  --fp-surface-2:     #161E2C;
  --fp-surface-3:     #1C2638;
  --fp-border:        #1E2D42;
  --fp-border-2:      #253449;

  --fp-text-primary:   #F1F5F9;
  --fp-text-secondary: #94A3B8;
  --fp-text-tertiary:  #64748B;

  --fp-green-bg:#052e16; --fp-green-border:#166534; --fp-green-text:#86EFAC;
  --fp-amber-bg:#431407; --fp-amber-border:#92400E; --fp-amber-text:#FDE68A;
  --fp-red-bg:  #450a0a; --fp-red-border:  #991B1B; --fp-red-text:  #FCA5A5;
  --fp-blue-bg: #0C1A2E; --fp-blue-border: #1E40AF; --fp-blue-text: #93C5FD;
  --fp-purple-bg:#1a0533;--fp-purple-border:#5B21B6;--fp-purple-text:#C4B5FD;
  --fp-slate-bg:#161E2C; --fp-slate-border:#253449; --fp-slate-text:#94A3B8;

  --fp-shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --fp-shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --fp-shadow-md: 0 4px 6px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.3);
  --fp-shadow-lg: 0 10px 15px rgba(0,0,0,.4), 0 4px 6px rgba(0,0,0,.35);

  /* Bridge into Frappe dark vars */
  --bg-color:     var(--fp-bg);
  --fg-color:     var(--fp-surface);
  --navbar-bg:    var(--fp-surface);
  --card-bg:      var(--fp-surface);
  --control-bg:   var(--fp-surface-2);
  --border-color: var(--fp-border);
  --text-color:   var(--fp-text-primary);
}