/**
 * @file        asan-design-system.css
 * @path        assets/css/asan-design-system.css
 * @role        Design System — Core Tokens & Foundation
 * @description Defines all design tokens for the Asan AI Engine interface:
 *              colors, typography scale, spacing rhythm (8px grid), shadows,
 *              radii, transitions, z-index layers, and theme switching.
 *              Dark theme is default. Light theme activates via data attribute.
 *              Uses CSS logical properties for seamless RTL/LTR support.
 *
 * @author      Sirvan Alirezaei
 * @copyright   © Sirvan Alirezaei. All rights reserved.
 * @version     4.0.0
 * @since       2025-01
 * @status      Production-critical
 */

/* ==========================================================================
   1. ROOT TOKENS — DARK THEME (DEFAULT)
   ========================================================================== */

:root,
[data-asan-theme="dark"] {

  /* --- Color: Backgrounds --- */
  --asan-bg-primary:        #1c1c1e;
  --asan-bg-secondary:      #2c2c2e;
  --asan-bg-tertiary:       #3a3a3c;
  --asan-bg-elevated:       #38383a;
  --asan-bg-grouped:        #242426;
  --asan-bg-overlay:        rgba(0, 0, 0, 0.55);
  --asan-bg-frosted:        rgba(44, 44, 46, 0.72);

  /* --- Color: Text --- */
  --asan-text-primary:      #ffffff;
  --asan-text-secondary:    #ebebf5;
  --asan-text-tertiary:     #98989d;
  --asan-text-quaternary:   #636366;
  --asan-text-placeholder:  #636366;
  --asan-text-inverse:      #1d1d1f;

  /* --- Color: Brand & Accent --- */
  --asan-accent:            #007aff;
  --asan-accent-hover:      #0051d5;
  --asan-accent-active:     #0040a8;
  --asan-accent-subtle:     rgba(0, 122, 255, 0.16);
  --asan-accent-text:       #64b5f6;

  /* --- Color: Semantic --- */
  --asan-success:           #30d158;
  --asan-success-subtle:    rgba(48, 209, 88, 0.14);
  --asan-success-text:      #30d158;
  --asan-warning:           #ff9f0a;
  --asan-warning-subtle:    rgba(255, 159, 10, 0.14);
  --asan-warning-text:      #ff9f0a;
  --asan-error:             #ff453a;
  --asan-error-subtle:      rgba(255, 69, 58, 0.14);
  --asan-error-text:        #ff453a;
  --asan-info:              #64d2ff;
  --asan-info-subtle:       rgba(100, 210, 255, 0.14);

  /* --- Color: Borders & Dividers --- */
  --asan-border:            rgba(255, 255, 255, 0.1);
  --asan-border-strong:     rgba(255, 255, 255, 0.18);
  --asan-border-subtle:     rgba(255, 255, 255, 0.06);
  --asan-divider:           rgba(255, 255, 255, 0.05);
  --asan-border-focus:      var(--asan-accent);
  --asan-ring-focus:        rgba(0, 122, 255, 0.4);

  /* --- Typography: Font Families --- */
  --asan-font-persian:      'Vazirmatn', 'Tahoma', 'Arial', sans-serif;
  --asan-font-system:       -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                            'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
                            'Helvetica Neue', sans-serif;
  --asan-font-mono:         'SF Mono', SFMono-Regular, ui-monospace,
                            'Cascadia Code', Menlo, Consolas, monospace;

  /* --- Typography: Size Scale --- */
  --asan-text-xs:           0.75rem;   /* 12px */
  --asan-text-sm:           0.875rem;  /* 14px */
  --asan-text-base:         1rem;      /* 16px */
  --asan-text-lg:           1.125rem;  /* 18px */
  --asan-text-xl:           1.25rem;   /* 20px */
  --asan-text-2xl:          1.5rem;    /* 24px */
  --asan-text-3xl:          1.875rem;  /* 30px */
  --asan-text-4xl:          2.25rem;   /* 36px */

  /* --- Typography: Font Weight --- */
  --asan-weight-normal:     400;
  --asan-weight-medium:     500;
  --asan-weight-bold:       700;

  /* --- Typography: Line Height --- */
  --asan-leading-none:      1;
  --asan-leading-tight:     1.2;
  --asan-leading-snug:      1.375;
  --asan-leading-normal:    1.5;
  --asan-leading-relaxed:   1.7;
  --asan-leading-loose:     2;

  /* --- Typography: Letter Spacing --- */
  --asan-tracking-tight:    -0.02em;
  --asan-tracking-normal:   0;
  --asan-tracking-wide:     0.02em;

  /* --- Spacing: 8px Grid --- */
  --asan-space-0:           0;
  --asan-space-1:           0.25rem;   /* 4px */
  --asan-space-2:           0.5rem;    /* 8px */
  --asan-space-3:           0.75rem;   /* 12px */
  --asan-space-4:           1rem;      /* 16px */
  --asan-space-5:           1.25rem;   /* 20px */
  --asan-space-6:           1.5rem;    /* 24px */
  --asan-space-8:           2rem;      /* 32px */
  --asan-space-10:          2.5rem;    /* 40px */
  --asan-space-12:          3rem;      /* 48px */
  --asan-space-16:          4rem;      /* 64px */
  --asan-space-20:          5rem;      /* 80px */
  --asan-space-24:          6rem;      /* 96px */

  /* --- Border Radius --- */
  --asan-radius-sm:         6px;
  --asan-radius-md:         10px;
  --asan-radius-lg:         14px;
  --asan-radius-xl:         20px;
  --asan-radius-2xl:        28px;
  --asan-radius-full:       9999px;

  /* --- Shadows (Layered, Apple-style) --- */
  --asan-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.3);
  --asan-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.3),
                            0 1px 2px rgba(0, 0, 0, 0.2);
  --asan-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.3),
                            0 2px 4px rgba(0, 0, 0, 0.2);
  --asan-shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.3),
                            0 4px 6px rgba(0, 0, 0, 0.2);
  --asan-shadow-xl:         0 20px 25px rgba(0, 0, 0, 0.35),
                            0 8px 10px rgba(0, 0, 0, 0.2);
  --asan-shadow-2xl:        0 25px 50px rgba(0, 0, 0, 0.5);
  --asan-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --asan-shadow-none:       none;

  /* --- Transitions --- */
  --asan-duration-fast:     120ms;
  --asan-duration-normal:   200ms;
  --asan-duration-slow:     350ms;
  --asan-duration-slower:   500ms;
  --asan-ease-default:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --asan-ease-in:           cubic-bezier(0.42, 0, 1, 1);
  --asan-ease-out:          cubic-bezier(0, 0, 0.58, 1);
  --asan-ease-in-out:       cubic-bezier(0.42, 0, 0.58, 1);
  --asan-ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index Layers --- */
  --asan-z-base:            0;
  --asan-z-dropdown:        100;
  --asan-z-sticky:          200;
  --asan-z-fixed:           300;
  --asan-z-sidebar:         400;
  --asan-z-overlay:         500;
  --asan-z-modal:           600;
  --asan-z-popover:         700;
  --asan-z-toast:           800;
  --asan-z-tooltip:         900;
  --asan-z-max:             9999;

  /* --- Layout --- */
  --asan-sidebar-width:     260px;
  --asan-sidebar-collapsed: 72px;
  --asan-header-height:     64px;
  --asan-content-max-width: 1200px;
  --asan-card-padding:      var(--asan-space-6);

  /* --- Breakpoints (reference only — used in media queries) --- */
  /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */

  /* --- Misc --- */
  --asan-backdrop-blur:     20px;
  --asan-scrollbar-width:   6px;
  --asan-scrollbar-track:   transparent;
  --asan-scrollbar-thumb:   rgba(255, 255, 255, 0.15);
  --asan-scrollbar-hover:   rgba(255, 255, 255, 0.25);
  --asan-selection-bg:      var(--asan-accent-subtle);
  --asan-selection-text:    var(--asan-text-primary);
}


/* ==========================================================================
   2. LIGHT THEME OVERRIDES
   ========================================================================== */

[data-asan-theme="light"] {

  --asan-bg-primary:        #f5f5f7;
  --asan-bg-secondary:      #ffffff;
  --asan-bg-tertiary:       #e8e8ed;
  --asan-bg-elevated:       #ffffff;
  --asan-bg-grouped:        #f2f2f7;
  --asan-bg-overlay:        rgba(0, 0, 0, 0.35);
  --asan-bg-frosted:        rgba(255, 255, 255, 0.72);

  --asan-text-primary:      #1d1d1f;
  --asan-text-secondary:    #515154;
  --asan-text-tertiary:     #86868b;
  --asan-text-quaternary:   #aeaeb2;
  --asan-text-placeholder:  #c7c7cc;
  --asan-text-inverse:      #ffffff;

  --asan-accent-subtle:     rgba(0, 122, 255, 0.1);
  --asan-accent-text:       #007aff;

  --asan-success-subtle:    rgba(48, 209, 88, 0.1);
  --asan-success-text:      #248a3d;
  --asan-warning-subtle:    rgba(255, 159, 10, 0.1);
  --asan-warning-text:      #b25000;
  --asan-error-subtle:      rgba(255, 69, 58, 0.1);
  --asan-error-text:        #d70015;

  --asan-border:            rgba(0, 0, 0, 0.1);
  --asan-border-strong:     rgba(0, 0, 0, 0.18);
  --asan-border-subtle:     rgba(0, 0, 0, 0.06);
  --asan-divider:           rgba(0, 0, 0, 0.05);

  --asan-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.06);
  --asan-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.08),
                            0 1px 2px rgba(0, 0, 0, 0.04);
  --asan-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.07),
                            0 2px 4px rgba(0, 0, 0, 0.04);
  --asan-shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.08),
                            0 4px 6px rgba(0, 0, 0, 0.04);
  --asan-shadow-xl:         0 20px 25px rgba(0, 0, 0, 0.1),
                            0 8px 10px rgba(0, 0, 0, 0.04);
  --asan-shadow-2xl:        0 25px 50px rgba(0, 0, 0, 0.15);
  --asan-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, 0.06);

  --asan-scrollbar-thumb:   rgba(0, 0, 0, 0.15);
  --asan-scrollbar-hover:   rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   3. SYSTEM PREFERENCE AUTO-DETECT (Optional fallback)
   ========================================================================== */

@media (prefers-color-scheme: light) {
  [data-asan-theme="auto"] {
    --asan-bg-primary:        #f5f5f7;
    --asan-bg-secondary:      #ffffff;
    --asan-bg-tertiary:       #e8e8ed;
    --asan-bg-elevated:       #ffffff;
    --asan-bg-grouped:        #f2f2f7;
    --asan-bg-overlay:        rgba(0, 0, 0, 0.35);
    --asan-bg-frosted:        rgba(255, 255, 255, 0.72);
    --asan-text-primary:      #1d1d1f;
    --asan-text-secondary:    #515154;
    --asan-text-tertiary:     #86868b;
    --asan-text-quaternary:   #aeaeb2;
    --asan-text-placeholder:  #c7c7cc;
    --asan-text-inverse:      #ffffff;
    --asan-border:            rgba(0, 0, 0, 0.1);
    --asan-border-strong:     rgba(0, 0, 0, 0.18);
    --asan-border-subtle:     rgba(0, 0, 0, 0.06);
    --asan-divider:           rgba(0, 0, 0, 0.05);
    --asan-scrollbar-thumb:   rgba(0, 0, 0, 0.15);
    --asan-scrollbar-hover:   rgba(0, 0, 0, 0.3);
    --asan-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.08),
                              0 1px 2px rgba(0, 0, 0, 0.04);
    --asan-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.07),
                              0 2px 4px rgba(0, 0, 0, 0.04);
    --asan-shadow-lg:         0 10px 15px rgba(0, 0, 0, 0.08),
                              0 4px 6px rgba(0, 0, 0, 0.04);
  }
}


/* ==========================================================================
   4. GLOBAL RESETS & BASE STYLES
   ========================================================================== */

.asan-ai-wrap,
.asan-ai-wrap *,
.asan-ai-wrap *::before,
.asan-ai-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.asan-ai-wrap {
  font-family: var(--asan-font-persian);
  font-size: var(--asan-text-base);
  font-weight: var(--asan-weight-normal);
  line-height: var(--asan-leading-normal);
  color: var(--asan-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  direction: rtl;
}

.asan-ai-wrap:lang(en),
.asan-ai-wrap[dir="ltr"] {
  font-family: var(--asan-font-system);
  direction: ltr;
}


/* ==========================================================================
   5. SELECTION & SCROLLBAR
   ========================================================================== */

.asan-ai-wrap ::selection {
  background-color: var(--asan-selection-bg);
  color: var(--asan-selection-text);
}

.asan-ai-wrap ::-webkit-scrollbar {
  width: var(--asan-scrollbar-width);
  height: var(--asan-scrollbar-width);
}

.asan-ai-wrap ::-webkit-scrollbar-track {
  background: var(--asan-scrollbar-track);
}

.asan-ai-wrap ::-webkit-scrollbar-thumb {
  background: var(--asan-scrollbar-thumb);
  border-radius: var(--asan-radius-full);
}

.asan-ai-wrap ::-webkit-scrollbar-thumb:hover {
  background: var(--asan-scrollbar-hover);
}

/* Firefox */
.asan-ai-wrap {
  scrollbar-width: thin;
  scrollbar-color: var(--asan-scrollbar-thumb) var(--asan-scrollbar-track);
}


/* ==========================================================================
   6. FOCUS MANAGEMENT (Accessibility)
   ========================================================================== */

.asan-ai-wrap :focus {
  outline: none;
}

.asan-ai-wrap :focus-visible {
  outline: 2px solid var(--asan-border-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--asan-ring-focus);
  border-radius: var(--asan-radius-sm);
}

/* Remove focus ring for mouse clicks */
.asan-ai-wrap :focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}


/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

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


/* ==========================================================================
   8. TYPOGRAPHY UTILITIES
   ========================================================================== */

.asan-ai-text-xs       { font-size: var(--asan-text-xs); }
.asan-ai-text-sm       { font-size: var(--asan-text-sm); }
.asan-ai-text-base     { font-size: var(--asan-text-base); }
.asan-ai-text-lg       { font-size: var(--asan-text-lg); }
.asan-ai-text-xl       { font-size: var(--asan-text-xl); }
.asan-ai-text-2xl      { font-size: var(--asan-text-2xl); }
.asan-ai-text-3xl      { font-size: var(--asan-text-3xl); }

.asan-ai-font-normal   { font-weight: var(--asan-weight-normal); }
.asan-ai-font-medium   { font-weight: var(--asan-weight-medium); }
.asan-ai-font-bold     { font-weight: var(--asan-weight-bold); }

.asan-ai-leading-tight   { line-height: var(--asan-leading-tight); }
.asan-ai-leading-normal  { line-height: var(--asan-leading-normal); }
.asan-ai-leading-relaxed { line-height: var(--asan-leading-relaxed); }

.asan-ai-text-primary   { color: var(--asan-text-primary); }
.asan-ai-text-secondary { color: var(--asan-text-secondary); }
.asan-ai-text-tertiary  { color: var(--asan-text-tertiary); }
.asan-ai-text-accent    { color: var(--asan-accent-text); }
.asan-ai-text-success   { color: var(--asan-success-text); }
.asan-ai-text-warning   { color: var(--asan-warning-text); }
.asan-ai-text-error     { color: var(--asan-error-text); }

.asan-ai-mono {
  font-family: var(--asan-font-mono);
  font-size: 0.9em;
  direction: ltr;
  unicode-bidi: embed;
}


/* ==========================================================================
   9. SPACING UTILITIES
   ========================================================================== */

.asan-ai-p-0    { padding: var(--asan-space-0); }
.asan-ai-p-2    { padding: var(--asan-space-2); }
.asan-ai-p-4    { padding: var(--asan-space-4); }
.asan-ai-p-6    { padding: var(--asan-space-6); }
.asan-ai-p-8    { padding: var(--asan-space-8); }

.asan-ai-m-0    { margin: var(--asan-space-0); }
.asan-ai-m-2    { margin: var(--asan-space-2); }
.asan-ai-m-4    { margin: var(--asan-space-4); }
.asan-ai-m-6    { margin: var(--asan-space-6); }
.asan-ai-m-8    { margin: var(--asan-space-8); }

/* Logical (RTL-safe) margin/padding */
.asan-ai-ms-2   { margin-inline-start: var(--asan-space-2); }
.asan-ai-ms-4   { margin-inline-start: var(--asan-space-4); }
.asan-ai-me-2   { margin-inline-end: var(--asan-space-2); }
.asan-ai-me-4   { margin-inline-end: var(--asan-space-4); }
.asan-ai-mb-2   { margin-block-end: var(--asan-space-2); }
.asan-ai-mb-4   { margin-block-end: var(--asan-space-4); }
.asan-ai-mb-6   { margin-block-end: var(--asan-space-6); }
.asan-ai-mt-4   { margin-block-start: var(--asan-space-4); }
.asan-ai-mt-6   { margin-block-start: var(--asan-space-6); }

.asan-ai-ps-4   { padding-inline-start: var(--asan-space-4); }
.asan-ai-pe-4   { padding-inline-end: var(--asan-space-4); }

.asan-ai-gap-2  { gap: var(--asan-space-2); }
.asan-ai-gap-3  { gap: var(--asan-space-3); }
.asan-ai-gap-4  { gap: var(--asan-space-4); }
.asan-ai-gap-6  { gap: var(--asan-space-6); }


/* ==========================================================================
   10. LAYOUT UTILITIES
   ========================================================================== */

.asan-ai-flex          { display: flex; }
.asan-ai-flex-col      { display: flex; flex-direction: column; }
.asan-ai-flex-row      { display: flex; flex-direction: row; }
.asan-ai-flex-wrap     { flex-wrap: wrap; }
.asan-ai-flex-1        { flex: 1 1 0%; }
.asan-ai-flex-none     { flex: none; }
.asan-ai-flex-center   { display: flex; align-items: center; justify-content: center; }
.asan-ai-items-center  { align-items: center; }
.asan-ai-items-start   { align-items: flex-start; }
.asan-ai-items-end     { align-items: flex-end; }
.asan-ai-justify-between { justify-content: space-between; }
.asan-ai-justify-center  { justify-content: center; }
.asan-ai-justify-end     { justify-content: flex-end; }

.asan-ai-grid          { display: grid; }
.asan-ai-grid-2        { display: grid; grid-template-columns: repeat(2, 1fr); }
.asan-ai-grid-3        { display: grid; grid-template-columns: repeat(3, 1fr); }
.asan-ai-grid-4        { display: grid; grid-template-columns: repeat(4, 1fr); }

.asan-ai-block         { display: block; }
.asan-ai-inline        { display: inline; }
.asan-ai-hidden        { display: none; }
.asan-ai-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.asan-ai-w-full        { width: 100%; }
.asan-ai-h-full        { height: 100%; }
.asan-ai-min-h-screen  { min-height: 100vh; }
.asan-ai-overflow-auto { overflow: auto; }
.asan-ai-overflow-hidden { overflow: hidden; }
.asan-ai-relative      { position: relative; }
.asan-ai-absolute      { position: absolute; }
.asan-ai-sticky        { position: sticky; }
.asan-ai-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ==========================================================================
   11. ANIMATION KEYFRAMES
   ========================================================================== */

@keyframes asan-ai-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes asan-ai-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes asan-ai-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes asan-ai-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes asan-ai-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes asan-ai-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes asan-ai-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

@keyframes asan-ai-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.asan-ai-animate-fade-in   { animation: asan-ai-fade-in var(--asan-duration-normal) var(--asan-ease-out); }
.asan-ai-animate-slide-up  { animation: asan-ai-slide-up var(--asan-duration-slow) var(--asan-ease-out); }
.asan-ai-animate-scale-in  { animation: asan-ai-scale-in var(--asan-duration-slow) var(--asan-ease-spring); }
.asan-ai-animate-spin      { animation: asan-ai-spin 1s linear infinite; }
.asan-ai-animate-pulse     { animation: asan-ai-pulse 2s var(--asan-ease-in-out) infinite; }


/* ==========================================================================
   12. RESPONSIVE GRID UTILITIES
   ========================================================================== */

@media (max-width: 768px) {
  .asan-ai-grid-2,
  .asan-ai-grid-3,
  .asan-ai-grid-4 {
    grid-template-columns: 1fr;
  }

  .asan-ai-md-hidden { display: none; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .asan-ai-grid-3,
  .asan-ai-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1025px) {
  .asan-ai-lg-flex-row { flex-direction: row; }
}