:root,
:root[data-theme="classic"],
.theme-classic {
  color-scheme: light;

  
  --color-primary:          #C0273B;   
  --color-secondary:        #8A8F98;   
  --color-accent:           #E64C5E;   

  
  --color-background:       #F2F1EF;   
  --color-surface:          #FFFFFF;   
  --color-surface-inverse:  #1E1F23;   

  
  --color-text:             #1E1F23;
  --color-text-muted:       #71767F;
  --color-on-primary:       #FFFFFF;   

  
  --color-border:           #E6E4E1;

  
  --color-success:          #2E7D4F;
  --color-warning:          #B9791F;
  --color-error:            #C0273B;
  --color-info:             #2B6CB0;

  
  --color-shade:            #000000;
  --shadow-color:           rgba(0, 0, 0, 0.10);

  
  --radius-base:            14px;
  --spacing-base:           16px;
  --font-family:            'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}





:root[data-theme="light"],
.theme-light {
  color-scheme: light;
  --color-primary:          #C0273B;
  --color-secondary:        #82868E;
  --color-accent:           #DC4356;
  --color-background:       #FFFFFF;
  --color-surface:          #FFFFFF;
  --color-surface-inverse:  #23252B;
  --color-text:             #17181C;
  --color-text-muted:       #6B6F76;
  --color-on-primary:       #FFFFFF;
  --color-border:           #E4E4E7;
  --color-success:          #2E7D4F;
  --color-warning:          #B0761E;
  --color-error:            #C0273B;
  --color-info:             #2B6CB0;
  --color-shade:            #000000;
  --shadow-color:           rgba(0, 0, 0, 0.05);
  --radius-base:            12px;
  --spacing-base:           16px;
  --font-family:            'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}


:root[data-theme="dark"],
.theme-dark {
  color-scheme: dark;
  --color-primary:          #D33B50;
  --color-secondary:        #7E8593;
  --color-accent:           #F0687C;
  --color-background:       #101216;
  --color-surface:          #191C22;
  --color-surface-inverse:  #0A0C0F;
  --color-text:             #E8EAEF;
  --color-text-muted:       #9BA1AD;
  --color-on-primary:       #FFFFFF;
  --color-border:           #2A2E36;
  --color-success:          #4FB477;
  --color-warning:          #E0A340;
  --color-error:            #F0637A;
  --color-info:             #5B9BE0;
  --color-shade:            #FFFFFF;
  --shadow-color:           rgba(0, 0, 0, 0.55);
  --radius-base:            14px;
  --spacing-base:           16px;
  --font-family:            'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}


:root[data-theme="ocean"],
.theme-ocean {
  color-scheme: light;
  --color-primary:          #0F6E8C;
  --color-secondary:        #7C97A6;
  --color-accent:           #17A2B8;
  --color-background:       #EFF6F8;
  --color-surface:          #FFFFFF;
  --color-surface-inverse:  #10303C;
  --color-text:             #14262E;
  --color-text-muted:       #627880;
  --color-on-primary:       #FFFFFF;
  --color-border:           #DCE8EC;
  --color-success:          #1F8A6B;
  --color-warning:          #C08329;
  --color-error:            #C33C4A;
  --color-info:             #2B6CB0;
  --color-shade:            #000000;
  --shadow-color:           rgba(11, 52, 66, 0.12);
  --radius-base:            14px;
  --spacing-base:           16px;
  --font-family:            'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}


:root[data-theme="sunset"],
.theme-sunset {
  color-scheme: light;
  --color-primary:          #C64A1A;
  --color-secondary:        #A8836E;
  --color-accent:           #F08A3C;
  --color-background:       #FDF5EF;
  --color-surface:          #FFFFFF;
  --color-surface-inverse:  #3A211A;
  --color-text:             #33201A;
  --color-text-muted:       #836A60;
  --color-on-primary:       #FFFFFF;
  --color-border:           #F0E0D4;
  --color-success:          #6E8F2E;
  --color-warning:          #C98A16;
  --color-error:            #C4342F;
  --color-info:             #2F6FA8;
  --color-shade:            #000000;
  --shadow-color:           rgba(74, 38, 20, 0.12);
  --radius-base:            16px;
  --spacing-base:           16px;
  --font-family:            'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}


:root[data-theme="forest"],
.theme-forest {
  color-scheme: light;
  --color-primary:          #2E6B4F;
  --color-secondary:        #85958A;
  --color-accent:           #4E9A6B;
  --color-background:       #F1F5F0;
  --color-surface:          #FFFFFF;
  --color-surface-inverse:  #1B2B22;
  --color-text:             #18261E;
  --color-text-muted:       #68776D;
  --color-on-primary:       #FFFFFF;
  --color-border:           #DCE6DC;
  --color-success:          #2E7D4F;
  --color-warning:          #B08228;
  --color-error:            #B94A3C;
  --color-info:             #2F6B96;
  --color-shade:            #000000;
  --shadow-color:           rgba(20, 40, 28, 0.12);
  --radius-base:            14px;
  --spacing-base:           16px;
  --font-family:            'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
}


:root[data-theme="custom"],
.theme-custom { color-scheme: light; }




:root {

  
  --n-1: color-mix(in srgb, var(--color-text)  4%, var(--color-background));
  --n-2: color-mix(in srgb, var(--color-text)  8%, var(--color-background));
  --n-3: color-mix(in srgb, var(--color-text) 14%, var(--color-background));
  --n-4: color-mix(in srgb, var(--color-text) 22%, var(--color-background));
  --n-5: color-mix(in srgb, var(--color-text) 32%, var(--color-background));
  --n-6: color-mix(in srgb, var(--color-text) 45%, var(--color-background));
  --n-7: color-mix(in srgb, var(--color-text) 58%, var(--color-background));
  --n-8: color-mix(in srgb, var(--color-text) 72%, var(--color-background));
  --n-9: color-mix(in srgb, var(--color-text) 86%, var(--color-background));

  
  --color-surface-2:      color-mix(in srgb, var(--color-text)  3%, var(--color-surface));
  --color-surface-3:      color-mix(in srgb, var(--color-text)  7%, var(--color-surface));
  --color-on-inverse:     color-mix(in srgb, #FFFFFF 92%, var(--color-surface-inverse));
  --color-on-inverse-dim: color-mix(in srgb, #FFFFFF 62%, var(--color-surface-inverse));
  --color-overlay:        color-mix(in srgb, var(--color-shade) 55%, transparent);

  
  --color-text-faint:     color-mix(in srgb, var(--color-text-muted) 70%, var(--color-background));
  --color-text-strong:    color-mix(in srgb, var(--color-text) 92%, var(--color-shade));

  
  --color-border-soft:    color-mix(in srgb, var(--color-border) 55%, var(--color-background));
  --color-border-strong:  color-mix(in srgb, var(--color-border) 70%, var(--color-text));

  
  --color-primary-strong: color-mix(in srgb, var(--color-primary) 78%, var(--color-shade));
  --color-primary-deep:   color-mix(in srgb, var(--color-primary) 55%, var(--color-shade));
  --color-primary-soft:   color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --color-primary-softer: color-mix(in srgb, var(--color-primary)  6%, var(--color-surface));
  --color-primary-line:   color-mix(in srgb, var(--color-primary) 28%, var(--color-surface));
  
  --color-primary-text:   color-mix(in srgb, var(--color-primary) 88%, var(--color-shade));
  --color-accent-strong:  color-mix(in srgb, var(--color-accent)  78%, var(--color-shade));
  --color-accent-soft:    color-mix(in srgb, var(--color-accent)  12%, var(--color-surface));
  --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 12%, var(--color-surface));

  
  --color-success-soft:   color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  --color-success-line:   color-mix(in srgb, var(--color-success) 30%, var(--color-surface));
  --color-success-text:   color-mix(in srgb, var(--color-success) 82%, var(--color-text));

  --color-warning-soft:   color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  --color-warning-line:   color-mix(in srgb, var(--color-warning) 32%, var(--color-surface));
  --color-warning-text:   color-mix(in srgb, var(--color-warning) 82%, var(--color-text));

  --color-error-soft:     color-mix(in srgb, var(--color-error) 12%, var(--color-surface));
  --color-error-line:     color-mix(in srgb, var(--color-error) 30%, var(--color-surface));
  --color-error-text:     color-mix(in srgb, var(--color-error) 82%, var(--color-text));

  --color-info-soft:      color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
  --color-info-line:      color-mix(in srgb, var(--color-info) 30%, var(--color-surface));
  --color-info-text:      color-mix(in srgb, var(--color-info) 82%, var(--color-text));

  
  --gradient-brand:   linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  --gradient-accent:  linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-neutral: linear-gradient(135deg, var(--color-secondary) 0%,
                        color-mix(in srgb, var(--color-secondary) 55%, var(--color-shade)) 100%);

  
  --radius-sm:   calc(var(--radius-base) * 0.55);
  --radius-lg:   calc(var(--radius-base) * 1.45);
  --radius-xl:   calc(var(--radius-base) * 1.85);
  --radius-pill: 999px;

  --shadow-sm:   0 2px  8px var(--shadow-color);
  --shadow-base: 0 4px 20px var(--shadow-color);
  --shadow-lg:   0 12px 40px var(--shadow-color);
  --shadow-inset: inset 0 1px 0 color-mix(in srgb, var(--color-surface) 60%, transparent);

  --spacing-xs: calc(var(--spacing-base) * 0.25);
  --spacing-sm: calc(var(--spacing-base) * 0.5);
  --spacing-md: var(--spacing-base);
  --spacing-lg: calc(var(--spacing-base) * 1.5);
  --spacing-xl: calc(var(--spacing-base) * 2.5);

  
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);

  
  --primary:      var(--color-primary);
  --primary-dark: var(--color-primary-strong);
  --secondary:    var(--color-secondary);
  --accent:       var(--color-accent);
  --dark:         var(--color-text);
  --light:        var(--color-background);
  --gradient1:    var(--gradient-brand);
  --gradient2:    var(--gradient-neutral);
  --gradient3:    var(--gradient-accent);
}





:root { accent-color: var(--color-primary); }

::selection {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: var(--color-text);
}


:root { scrollbar-color: var(--n-4) transparent; }


:root.ila-theme-switching,
:root.ila-theme-switching *,
:root.ila-theme-switching *::before,
:root.ila-theme-switching *::after {
  transition: background-color .25s ease, background-image .25s ease,
              color .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  :root.ila-theme-switching,
  :root.ila-theme-switching *,
  :root.ila-theme-switching *::before,
  :root.ila-theme-switching *::after { transition: none !important; }
}


.ila-swatch {
  display: inline-block; width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}




@media print {
  :root,
  :root[data-theme],
  .theme-classic, .theme-light, .theme-dark,
  .theme-ocean, .theme-sunset, .theme-forest, .theme-custom {
    color-scheme: light;
    --color-background:      #FFFFFF;
    --color-surface:         #FFFFFF;
    --color-surface-inverse: #FFFFFF;
    --color-text:            #000000;
    --color-text-muted:      #444444;
    --color-on-primary:      #FFFFFF;
    --color-on-inverse:      #000000;
    --color-border:          #BBBBBB;
    --color-shade:           #000000;
    --shadow-color:          transparent;
  }
}