:root {
  --brand-a:          #1D4ADB;
  --brand-b:          #2498F5;
  --brand-a-hover:    #1138CA;
  --brand-b-hover:    #0088E4;
  --brand-text-on-dark: #7AA2FB;

  --grad-brand:       linear-gradient(135deg, var(--brand-a) 0%, var(--brand-b) 100%);
  --grad-brand-hover: linear-gradient(135deg, var(--brand-a-hover) 0%, var(--brand-b-hover) 100%);
}

:root {
  --success:  #10B981;
  --warning:  #F59E0B;
  --danger:   #EF4444;
  --danger-strong: #991B1B;
  --info:     #3B82F6;

  --success-bg: rgba(16,185,129,0.12);
  --warning-bg: rgba(245,158,11,0.12);
  --danger-bg:  rgba(239,68,68,0.12);
  --info-bg:    rgba(59,130,246,0.12);

  --on-success: var(--success);
  --on-warning: var(--warning);
  --on-danger:  var(--danger);
  --on-info:    var(--info);

}

[data-theme="dark"] {
  --bg-root:        #0C0C0D;
  --bg-surface:     #141416;
  --bg-card:        #18181A;
  --bg-card-hover:  #202023;
  --bg-chip:        #232326;

  --border-soft:    #2C2C31;
  --border-medium:  #3A3A40;
  --border-strong:  #505058;

  --text-primary:   #EDEDEF;
  --text-secondary: #A1A1A6;
  --text-muted:     #8B8B91;

  --accent:         #295BED;
  --accent-hover:   #3165F8;
  --accent-text:    #7AA2FB;
  --accent-soft:    rgba(122,162,251,0.12);
  --accent-soft-hover: rgba(122,162,251,0.2);
  --accent-border:  rgba(122,162,251,0.3);
  --on-accent:      #FFFFFF;

  --on-success:     var(--success);
  --on-warning:     var(--warning);
  --on-danger:      #F87171;
  --on-info:        var(--tone-blue);
  --info-soft:      rgba(110,162,255,0.12);
  --info-border:    rgba(110,162,255,0.30);

  --tone-blue:      #6EA2FF;
  --tone-green:     #34D399;
  --tone-orange:    #FBBF24;
  --tone-red:       #F87171;
  --tone-purple:    #A78BFA;
  --tone-pink:      #F472B6;
  --tone-teal:      #2DD4BF;
  --tone-gray:      var(--text-secondary);
  --tone-tint:      14%;

  --sidebar-bg:       #151517;
  --sidebar-bg-solid: #151517;
  --topbar-bg:        #151517;
  --nav-active-bg:    var(--bg-chip);
  --track-bg:         #2A2A2F;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-3: 0 16px 40px rgba(0,0,0,0.50);
}

[data-theme="light"] {
  --bg-root:        #F2F2F3;
  --bg-surface:     #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #F7F7F8;
  --bg-chip:        #F2F2F3;

  --border-soft:    #E4E4E7;
  --border-medium:  #D4D4D8;
  --border-strong:  #A1A1AA;

  --text-primary:   #111113;
  --text-secondary: #56565C;
  --text-muted:     #66666D;

  --accent:         #1F4DDF;
  --accent-hover:   #133BCE;
  --accent-text:    #1F4DDF;
  --accent-soft:    rgba(31,77,223,0.08);
  --accent-soft-hover: rgba(31,77,223,0.14);
  --accent-border:  rgba(31,77,223,0.24);
  --on-accent:      #FFFFFF;

  --on-success:     #047857;
  --on-warning:     #92400E;
  --on-danger:      #B91C1C;
  --on-info:        var(--tone-blue);
  --info-soft:      rgba(31,91,224,0.08);
  --info-border:    rgba(31,91,224,0.24);

  --tone-blue:      #1F55D6;
  --tone-green:     #059669;
  --tone-orange:    #D97706;
  --tone-red:       #DC2626;
  --tone-purple:    #7C3AED;
  --tone-pink:      #DB2777;
  --tone-teal:      #0D9488;
  --tone-gray:      var(--text-secondary);
  --tone-tint:      10%;

  --sidebar-bg:       #FFFFFF;
  --sidebar-bg-solid: #FFFFFF;
  --topbar-bg:        #FFFFFF;
  --nav-active-bg:    var(--bg-chip);
  --track-bg:         #E4E4E7;

  --shadow-1: 0 1px 2px rgba(17,17,19,0.04);
  --shadow-2: 0 6px 20px rgba(17,17,19,0.08);
  --shadow-3: 0 16px 40px rgba(17,17,19,0.12);
}

:root {
  --font-main:  'Peyda', 'Vazirmatn', sans-serif;
  --font-latin: 'Peyda Latin', 'Peyda', 'Vazirmatn', sans-serif;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-ui:   14px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   19px;
  --text-xl:   21px;
  --text-2xl:  25px;
  --text-3xl:  30px;

  --leading-body:  1.75;
  --leading-tight: 1.35;

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

:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
}

:root {
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full:9999px;
}

:root {
  --shadow-card:  0 4px 24px rgba(0,0,0,0.15);
}

:root {
  --sidebar-width: 260px;
  --topbar-height: 64px;
}

:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);

  --transition-fast:   0.15s var(--ease-out);
  --transition-normal: 0.22s var(--ease-out);

  --dur-press:    130ms;
  --dur-dropdown: 200ms;
  --dur-modal:    260ms;

  --lift: -2px;

  --tr-ui-fast: background-color .15s var(--ease-out), border-color .15s var(--ease-out),
                color .15s var(--ease-out), box-shadow .15s var(--ease-out),
                transform .15s var(--ease-out), opacity .15s var(--ease-out);
  --tr-ui-normal: background-color .22s var(--ease-out), border-color .22s var(--ease-out),
                  color .22s var(--ease-out), box-shadow .22s var(--ease-out),
                  transform .22s var(--ease-out), opacity .22s var(--ease-out);

  --focus-outline: 2px solid var(--accent);
  --focus-offset:  2px;
}

:root {
  --glass-blur:   none;
  --glass-blur-sm:none;
}