/* =============================================================================
   AdminKit — variables.css
   All design tokens for the kit. Editing this file re-themes everything.
   Quick recipes:
     - Re-brand: change --brand-primary and --brand-accent below.
     - Resize sidebar: change --app-sidebar-width.
     - Change density: tweak --space-* scale and --app-header-height.
============================================================================= */

/* -----------------------------------------------------------------------------
   1. Raw palette (rarely consumed directly — feed the semantic layer below)
----------------------------------------------------------------------------- */
:root {
  /* Brand — charcoal / فحمي دافئ (primary) */
  --navy-900: #1c1917;
  --navy-800: #292524;
  --navy-700: #44403c;
  --navy-600: #57534e;
  --navy-500: #78716c;
  --navy-400: #a8a29e;

  /* Brand — jewelry gold / دهبي (accent) */
  --gold-700: #854d0e;
  --gold-600: #a16207;
  --gold-500: #c9a227;
  --gold-400: #d4af37;
  --gold-300: #e3c766;
  --gold-200: #f1e5be;

  /* Neutral warm greys — stone (light mode) */
  --gray-50:  #fafaf9;
  --gray-100: #f5f5f4;
  --gray-200: #e7e5e4;
  --gray-300: #d6d3d1;
  --gray-400: #a8a29e;
  --gray-500: #78716c;
  --gray-600: #57534e;
  --gray-700: #44403c;
  --gray-800: #292524;
  --gray-900: #1c1917;

  /* Status colors */
  --status-success: #16a34a;
  --status-success-soft: #dcfce7;
  --status-danger:  #dc2626;
  --status-danger-soft: #fee2e2;
  --status-warning: #d97706;
  --status-warning-soft: #fef3c7;
  --status-info:    #0284c7;
  --status-info-soft: #dbeafe;
}

/* -----------------------------------------------------------------------------
   2. Brand pointers — change these two lines to re-skin the whole kit
----------------------------------------------------------------------------- */
:root {
  --brand-primary:        var(--navy-900);
  --brand-primary-hover:  var(--navy-800);
  --brand-primary-soft:   rgba(28, 25, 23, 0.08);

  --brand-accent:         var(--gold-600);
  --brand-accent-hover:   var(--gold-700);
  --brand-accent-soft:    rgba(161, 98, 7, 0.12);
}

/* -----------------------------------------------------------------------------
   3. Semantic tokens — LIGHT MODE (default)
----------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-bg:           #fafaf9;
  --color-surface:      #ffffff;
  --color-surface-2:    #f7f6f4;
  --color-surface-hover:#f5f4f1;
  --color-border:       #e7e5e4;
  --color-border-strong:#d6d3d1;

  /* Text */
  --color-text:         var(--gray-800);
  --color-text-muted:   var(--gray-500);
  --color-text-faint:   var(--gray-400);
  --color-text-inverse: #ffffff;

  /* Links */
  --color-link:         var(--gold-700);
  --color-link-hover:   var(--brand-accent);

  /* Sidebar (always dark — admin convention; overridden in dark mode for consistency) */
  --sidebar-bg:               var(--navy-900);
  --sidebar-bg-elevated:      var(--navy-800);
  --sidebar-text:             #d6d3d1;
  --sidebar-text-muted:       #a8a29e;
  --sidebar-text-active:      #ffffff;
  --sidebar-item-hover:       rgba(255, 255, 255, 0.06);
  --sidebar-item-active:      rgba(212, 175, 55, 0.14);
  --sidebar-strip:            var(--gold-400);
  --sidebar-border:           rgba(255, 255, 255, 0.06);
  --sidebar-brand-bg:         var(--navy-800);
  --sidebar-org-bg:           linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.04));
  --sidebar-org-border:       rgba(212, 175, 55, 0.25);

  /* Header */
  --header-bg:          var(--color-surface);
  --header-border:      var(--color-border);
  --header-text:        var(--color-text);

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 24px 48px rgba(15, 23, 42, 0.16);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(212, 175, 55, 0.35);

  /* Overlay (sidebar / modal backdrop) */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --color-scheme: light;
}

/* -----------------------------------------------------------------------------
   4. Semantic tokens — DARK MODE
----------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:           #0c0a09;
  --color-surface:      #1c1917;
  --color-surface-2:    #242019;
  --color-surface-hover:#2a2521;
  --color-border:       #2e2a26;
  --color-border-strong:#403a34;

  --color-text:         #e7e5e4;
  --color-text-muted:   #a8a29e;
  --color-text-faint:   #78716c;
  --color-text-inverse: var(--navy-900);

  --color-link:         var(--gold-400);
  --color-link-hover:   var(--gold-300);

  /* Sidebar in dark mode: even deeper charcoal to differentiate from main bg */
  --sidebar-bg:               #080706;
  --sidebar-bg-elevated:      #1c1917;
  --sidebar-item-hover:       rgba(255, 255, 255, 0.045);
  --sidebar-item-active:      rgba(212, 175, 55, 0.18);

  /* In dark mode, the raw brand-primary (deep charcoal) blends into the page
     background. Re-point primary to a lighter surface so primary buttons
     and other primary-coloured chrome stay visible. The brand identity
     comes through the accent (gold) anyway. */
  --brand-primary:        #57534e;
  --brand-primary-hover:  #6b655f;
  --brand-primary-soft:   rgba(212, 175, 55, 0.10);

  --brand-accent:         var(--gold-400);
  --brand-accent-hover:   var(--gold-300);
  --brand-accent-soft:    rgba(212, 175, 55, 0.14);

  --header-bg:          var(--color-surface);
  --header-border:      var(--color-border);

  --status-success-soft: rgba(22, 163, 74, 0.18);
  --status-danger-soft:  rgba(220, 38, 38, 0.18);
  --status-warning-soft: rgba(217, 119, 6, 0.20);
  --status-info-soft:    rgba(2, 132, 199, 0.20);

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.6);

  --overlay-bg: rgba(0, 0, 0, 0.65);
  --color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   5. Sizing / layout
----------------------------------------------------------------------------- */
:root {
  --app-sidebar-width:        260px;
  --app-sidebar-width-mobile: 280px;
  --app-header-height:        64px;
  --app-mobile-breakpoint:    992px;

  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* Radii */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Type — خط ثمانية */
  --font-sans: 'Thmanyah Sans', 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Thmanyah Serif Display', 'Thmanyah Sans', 'Tajawal', system-ui, serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight:   1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.75;

  /* Motion */
  --duration-fast:  120ms;
  --duration:       200ms;
  --duration-slow:  320ms;
  --easing:         cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --z-base:     1;
  --z-sticky:   50;
  --z-header:   100;
  --z-sidebar:  200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;
}