/**
 * Nodhum Boutique — Design Tokens
 * Enterprise design system for Admin, POS, Auth, and Customer surfaces.
 * Load before components.css and theme overrides.
 */

/* ==========================================================================
   LIGHT THEME (default)
   ========================================================================== */
:root,
[data-nb-theme="light"] {
  /* ── Brand: Primary (Luxury Burgundy) ── */
  --primary: #6B153A;
  --primary-hover: #58102F;
  --primary-active: #470C25;
  --primary-light: #F8E8EE;
  --primary-50: #F8E8EE;
  --primary-100: #F0D1DD;
  --primary-200: #E1A3BB;
  --primary-300: #D27599;
  --primary-400: #A8426A;
  --primary-500: #6B153A;
  --primary-600: #58102F;
  --primary-700: #470C25;
  --primary-800: #3A091E;
  --primary-900: #2D0717;
  --primary-rgb: 107, 21, 58;

  /* ── Secondary: Luxury Gold (accents only) ── */
  --gold: #D4AF37;
  --gold-hover: #BF9C30;
  --gold-light: #FFF6DB;
  --gold-rgb: 212, 175, 55;

  /* ── Neutrals ── */
  --background: #FAFAFA;
  --surface: #FFFFFF;
  --surface-muted: #F5F5F7;
  --section: #F5F5F7;
  --border: #E5E7EB;
  --divider: #F1F3F5;

  /* ── Text ── */
  --text-primary: #1D1D1F;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-caption: #9CA3AF;
  --text-inverse: #FFFFFF;

  /* ── Status ── */
  --success: #16A34A;
  --success-light: #ecf8f1;
  --success-hover: #138f41;
  --warning: #F59E0B;
  --warning-light: #fef7eb;
  --warning-hover: #d88b0a;
  --danger: #DC2626;
  --danger-light: #fceeee;
  --danger-hover: #c22121;
  --info: #2563EB;
  --info-light: #eef3fd;
  --info-hover: #2157cf;

  /* ── Typography ── */
  --font-brand: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui-ar: 'Tajawal', 'Inter', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  --text-display: 3rem;
  --text-h1: 2.25rem;
  --text-h2: 1.875rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-subtitle: 1.125rem;
  --text-body-lg: 1.0625rem;
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-caption-size: 0.75rem;
  --text-button: 0.875rem;
  --text-table: 0.8125rem;
  --text-nav: 0.875rem;
  --text-sidebar: 0.8125rem;
  --text-form: 0.9375rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ── Spacing (8pt grid) ── */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px */
  --space-8: 2rem;      /* 32px */
  --space-9: 2.25rem;   /* 36px */
  --space-10: 2.5rem;   /* 40px */
  --space-11: 3rem;     /* 48px */
  --space-12: 3.5rem;   /* 56px */
  --space-13: 4rem;     /* 64px */
  --space-14: 5rem;     /* 80px */
  --space-15: 6rem;     /* 96px */

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-xs: 0.25rem;   /* 4px  — badges */
  --radius-sm: 0.375rem;  /* 6px  — inputs, buttons */
  --radius-md: 0.5rem;    /* 8px  — cards, dropdowns */
  --radius-lg: 0.75rem;   /* 12px — dialogs */
  --radius-xl: 1rem;      /* 16px — modals */
  --radius-2xl: 1.5rem;   /* 24px — auth cards */
  --radius-full: 9999px;  /* pills, avatars */

  --radius-button: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-card: var(--radius-md);
  --radius-dialog: var(--radius-lg);
  --radius-dropdown: var(--radius-md);
  --radius-table: var(--radius-md);
  --radius-badge: var(--radius-xs);
  --radius-avatar: var(--radius-full);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(29, 29, 31, 0.04);
  --shadow-sm: 0 1px 3px rgba(29, 29, 31, 0.06), 0 1px 2px rgba(29, 29, 31, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(29, 29, 31, 0.07), 0 2px 4px -2px rgba(29, 29, 31, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(29, 29, 31, 0.08), 0 4px 6px -4px rgba(29, 29, 31, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(29, 29, 31, 0.08), 0 8px 10px -6px rgba(29, 29, 31, 0.04);
  --shadow-floating: 0 8px 30px rgba(107, 21, 58, 0.12);
  --shadow-modal: 0 25px 50px -12px rgba(29, 29, 31, 0.18);
  --shadow-dropdown: 0 4px 16px rgba(29, 29, 31, 0.1);
  --shadow-tooltip: 0 2px 8px rgba(29, 29, 31, 0.12);
  --shadow-focus: 0 0 0 3px rgba(107, 21, 58, 0.18);

  /* ── Borders ── */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ── Transitions ── */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: var(--duration-normal) var(--ease-out);
  --transition-fast: var(--duration-fast) var(--ease-out);

  /* ── Opacity ── */
  --opacity-disabled: 0.55;
  --opacity-muted: 0.72;
  --opacity-overlay: 0.48;

  /* ── Z-index ── */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* ── Chart palette ── */
  --chart-1: #6B153A;
  --chart-2: #D4AF37;
  --chart-3: #2563EB;
  --chart-4: #16A34A;
  --chart-5: #F59E0B;
  --chart-6: #A8426A;
  --chart-7: #58102F;
  --chart-8: #BF9C30;

  /* ── SmartAdmin / Bootstrap bridge (maps to tokens above) ── */
  --theme-primary: #6B153A;
  --theme-secondary: #6B7280;
  --theme-success: #16A34A;
  --theme-info: #2563EB;
  --theme-warning: #F59E0B;
  --theme-danger: #DC2626;
  --theme-light: #FFFFFF;
  --theme-dark: #1D1D1F;
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
[data-nb-theme="dark"],
.mod-skin-dark:not(.mod-skin-light) {
  --background: #0F0F10;
  --surface: #1A1A1C;
  --surface-muted: #242428;
  --section: #1E1E22;
  --border: #2E2E33;
  --divider: #252529;

  --text-primary: #F5F5F7;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;
  --text-caption: #52525B;
  --text-inverse: #1D1D1F;

  --primary-light: #2A1520;
  --primary-50: #2A1520;
  --primary-100: #3A1A28;

  --gold-light: #2A2518;

  --success-light: #0F2918;
  --warning-light: #2A2010;
  --danger-light: #2A1010;
  --info-light: #0F1A2E;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
  --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.55);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(107, 21, 58, 0.45);
}

/* ==========================================================================
   BASE TYPOGRAPHY
   ========================================================================== */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background-color: var(--background);
}

html[dir="rtl"] body {
  font-family: var(--font-ui-ar);
}

.nb-display,
.nb-h1, .nb-h2, .nb-h3, .nb-h4 {
  font-family: var(--font-brand);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.nb-display { font-size: var(--text-display); }
.nb-h1 { font-size: var(--text-h1); }
.nb-h2 { font-size: var(--text-h2); }
.nb-h3 { font-size: var(--text-h3); }
.nb-h4 { font-size: var(--text-h4); }

.nb-subtitle {
  font-size: var(--text-subtitle);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.nb-body-lg { font-size: var(--text-body-lg); }
.nb-body { font-size: var(--text-body); }
.nb-small { font-size: var(--text-small); }
.nb-caption {
  font-size: var(--text-caption-size);
  color: var(--text-caption);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  :root {
    --border: #9CA3AF;
    --text-muted: #374151;
  }
}