/**
 * ============================================================================
 * FILE: assets/css/tokens.css
 * PURPOSE: Design Tokens — Single source of truth for all design variables
 * DEPENDS ON: —
 * VERSION: 1.0.0
 * ============================================================================
 */

/* ── SECTION START: Color Palette ── */
:root {
  /* Brand */
  --color-gold:          #C9A84C;
  --color-gold-dim:      #8a6f30;
  --color-gold-glow:     rgba(201, 168, 76, 0.15);
  --color-gold-border:   rgba(201, 168, 76, 0.25);

  /* Backgrounds */
  --color-bg-base:       #070709;
  --color-bg-surface:    #111116;
  --color-bg-card:       #16161D;
  --color-bg-card-alt:   #1C1C25;
  --color-bg-input:      #0E0E14;
  --color-bg-hover:      rgba(255, 255, 255, 0.04);

  /* Text */
  --color-text-primary:  #F2EDE4;
  --color-text-secondary:#C8C2BA;
  --color-text-muted:    #8A8590;
  --color-text-disabled: #4A4855;

  /* Borders */
  --color-border-dim:    rgba(255, 255, 255, 0.05);
  --color-border-medium: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  /* Status */
  --color-success:       #2ecc71;
  --color-success-bg:    rgba(46, 204, 113, 0.12);
  --color-danger:        #e74c3c;
  --color-danger-bg:     rgba(231, 76, 60, 0.12);
  --color-warning:       #f39c12;
  --color-warning-bg:    rgba(243, 156, 18, 0.12);
  --color-info:          #3498db;
  --color-info-bg:       rgba(52, 152, 219, 0.12);

  /* Role accent colors */
  --color-admin:         #C9A84C;
  --color-exchanger:     #3498db;
  --color-customer:      #2ecc71;
}
/* ── SECTION END: Color Palette ── */

/* ── SECTION START: Typography Scale ── */
:root {
  --font-family-base:    'Vazirmatn', sans-serif;

  /* fluid type — clamp(min, preferred, max) */
  --text-xs:    clamp(0.65rem, 1.5vw, 0.75rem);
  --text-sm:    clamp(0.75rem, 1.8vw, 0.875rem);
  --text-base:  clamp(0.875rem, 2vw,  1rem);
  --text-md:    clamp(1rem,    2.2vw, 1.125rem);
  --text-lg:    clamp(1.125rem,2.5vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 3vw,  1.5rem);
  --text-2xl:   clamp(1.5rem,  4vw,  1.875rem);
  --text-3xl:   clamp(1.875rem,5vw,  2.25rem);

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-black:   800;

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;
}
/* ── SECTION END: Typography Scale ── */

/* ── SECTION START: Spacing Scale ── */
:root {
  /* fluid spacing */
  --space-2xs: clamp(2px,  0.5vw, 4px);
  --space-xs:  clamp(4px,  0.8vw, 6px);
  --space-sm:  clamp(6px,  1vw,   8px);
  --space-md:  clamp(12px, 2vw,   16px);
  --space-lg:  clamp(16px, 3vw,   24px);
  --space-xl:  clamp(24px, 4vw,   32px);
  --space-2xl: clamp(32px, 5vw,   48px);
  --space-3xl: clamp(48px, 6vw,   64px);

  /* Layout specific */
  --sidebar-width:   280px;
  --sidebar-collapsed: 70px;
  --topbar-height:   70px;
  --bottomnav-height:64px;
  --content-padding: clamp(12px, 3vw, 24px);
}
/* ── SECTION END: Spacing Scale ── */

/* ── SECTION START: Border Radius ── */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}
/* ── SECTION END: Border Radius ── */

/* ── SECTION START: Shadows ── */
:root {
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
  --shadow-gold:0 4px 20px rgba(201,168,76,0.2);
  --shadow-card:0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px var(--color-border-dim);
}
/* ── SECTION END: Shadows ── */

/* ── SECTION START: Z-Index ── */
:root {
  --z-base:           1;
  --z-raised:         10;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-topbar:         2000; /* بالای overlay سوئیچ نقش (1500) */
  --z-overlay:        950;
  --z-sidebar:        1000;
  --z-modal-backdrop: 2000;
  --z-modal-content:  2001;
  --z-toast:          2100;
}
/* ── SECTION END: Z-Index ── */

/* ── SECTION START: Transitions ── */
:root {
  --transition-fast:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ── SECTION END: Transitions ── */

/* ── SECTION START: Touch Targets (WCAG 2.5.5) ── */
:root {
  --touch-target-min: 44px;   /* حداقل اندازه برای لمس */
  --icon-size-sm:     16px;
  --icon-size-md:     20px;
  --icon-size-lg:     24px;
}
/* ── SECTION END: Touch Targets ── */

/* END OF FILE: tokens.css */