@layer tokens {
  :root {
  

  --fx-demo-serit-y: 52px;

    
    --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Bricolage Grotesque", var(--font-sans);

    --text-2xs: 10.5px;  
    --text-xs: 11.5px;   
    --text-sm: 12.5px;   
    --text-base: 13.5px; 
    --text-md: 15px;     
    --text-lg: 17px;     
    --text-display: 27px;
    --tracking-label: .08em;

    






    --field-text-min: 0px;

    
    --bg: #F1F2F8;            
    --surface: #FFFFFF;       
    --surface-muted: #F4F5F9; 
    --ink: #16182B;           
    


    --logo-zemin: #100B2C;
    --ink-strong: #2A2D6E;    
    --text-2: #4A4D63;        
    





    --muted: #66697C;         
    --faint: #8B8FA3;         
    --label: #A6A9BC;         

    







    --nav-ikon: #9A9DB0;
    --ikon-cizgi: 1.8;

    
    --primary: #4F46E5;
    --primary-2: #2563EB;
    --grad-primary: linear-gradient(135deg, var(--primary), var(--primary-2));
    --primary-soft: #EEF0FF;  
    --primary-border: rgba(79, 70, 229, .2);

    
    --warn: #B7791F;          
    --warn-soft: #FEF3E2;     
    --warn-icon: #EA8C2B;     
    --warn-icon-soft: #FFF1E6;
    --danger: #DC5A5A;
    --danger-soft: #FDEEEE;
    --success: #16A34A;       
    --success-dot: #22C55E;

    
    --line: rgba(22, 24, 43, .07);   
    --line-soft: rgba(22, 24, 43, .05); 
    --line-input: rgba(22, 24, 43, .12);

    




    --chart-income: #2563EB;
    --chart-income-grad: linear-gradient(180deg, #60A5FA, #2563EB);
    --chart-expense: #DDE0EA;
    --chart-expense-grad: linear-gradient(180deg, #E3E6EF, #D5D9E6);
    --chart-net: #4F46E5;
    --chart-net-halo: rgba(79, 70, 229, .15);
    --chart-col-hover: rgba(79, 70, 229, .045);
    --chart-tip-head: #A5A9C0;
    --chart-tip-label: #C9CCDC;
    --chart-tip-pos: #4ADE80;
    --chart-tip-neg: #F87171;

    
    --card-accent-indigo: linear-gradient(150deg, #EEF0FF, #FBFBFF);
    --card-accent-amber: linear-gradient(150deg, #FEF6E9, #FFFDFA);
    --card-accent-amber-border: rgba(234, 140, 43, .25);
    --amber-ink: #8A5A12;
    --amber-muted: #B08A4F;
    --banner-grad: linear-gradient(120deg, #F2F3FF 0%, #FDFDFF 55%, #FFF6EC 100%);
    --banner-border: rgba(79, 70, 229, .16);
    --banner-line: rgba(79, 70, 229, .12);

    
    --r-pill: 999px;
    --r-xl: 18px;      
    --r-lg: 16px;      
    --r-card: 14px;    
    --r-md: 12px;      
    --r-icon: 11px;    
    --r-nav: 10px;     
    --r-btn: 9px;      
    --r-xs: 4px;

    
    --chip-info-bg: #E6F2FE;   --chip-info-fg: #2563EB;   
    --chip-amber-bg: #FFF1E6;  --chip-amber-fg: #EA8C2B;  
    --chip-violet-bg: #F4E8FF; --chip-violet-fg: #7C3AED; 
    --chip-green-bg: #E7F7ED;  --chip-green-fg: #16A34A;  
    --chip-warn-bg: var(--warn-soft); --chip-warn-fg: var(--warn);

    

    --sec-req-bg: #F6F3FD;                    
    --sec-req-border: rgba(109, 40, 217, .16);
    --sec-req-ink: #6D28D9;                   
    --sec-req-dot: #7C6BE8;                   
    --sec-req-chip-bg: #F1ECFE;               
    --sec-req-input-border: rgba(109, 40, 217, .28);

    








    














    --aura:
      radial-gradient(360px 74vh at 67px 50px, rgba(79, 70, 229, .32), transparent 65%),
      radial-gradient(52vw 44vh at 100% 100%, rgba(234, 140, 43, .22), transparent 64%);

    


    --cam-yuzey: rgba(255, 255, 255, .6);
    --cam-kenar: rgba(255, 255, 255, .75);
    --cam-bulanik: blur(22px) saturate(1.4);
    --cam-golge: 0 30px 60px -22px rgba(37, 40, 90, .45),
                 0 10px 24px -14px rgba(22, 24, 43, .25);
    


    --cam-yuzey-yogun: rgba(255, 255, 255, .78);
    

    --cam-hap: rgba(255, 255, 255, .85);
    --cam-ada: rgba(255, 255, 255, .5);
    --cam-ada-kenar: rgba(255, 255, 255, .85);
    

    --cam-satir-hover: rgba(255, 255, 255, .55);

    






    --surface-kart: rgba(255, 255, 255, .72);
    --line-kart: rgba(255, 255, 255, .8);

    


    --kaydirma-thumb: rgba(79, 70, 229, .22);
    --kaydirma-thumb-ustunde: rgba(79, 70, 229, .42);
    --kaydirma-thumb-basili: rgba(79, 70, 229, .6);
    --kaydirma-firefox: rgba(79, 70, 229, .28);

    
    --shadow-card: 0 18px 40px -32px rgba(37, 40, 90, .5);
    --shadow-logo: 0 8px 18px -8px rgba(79, 70, 229, .6);
    --shadow-float: 0 20px 44px -16px rgba(22, 24, 43, .6);
    --shadow-menu: 0 24px 48px -20px rgba(22, 24, 43, .35);
    --shadow-soft-card: 0 10px 24px -20px rgba(37, 40, 90, .5);

    
    --dock-bg: #FBFBFD;         
    --dock-head-bg: #F7F8FB;    
    --dock-review-bg: #EFF1F6;  
    --dock-paper-zone: #DFE1E9; 
    --surface-faint: #FAFAFE;   
    --paper-ink: #2A2A33;       
    --paper-muted: #5A5567;
    --paper-line: #E4E4EA;
    --edit-bg: #F8F8FF;         
    --edit-border: rgba(79, 70, 229, .35);
    --danger-strong: #DC2626;   
    --overdue-mid: #C2410C;     
    --dot-idle: #E4E6EF;        
    --arrow: #C2C5D4;           

    
    


    --sidebar-w: 252px;
    --content-max: 1240px;
    --content-pad: 28px 36px 40px;
    --gap-panel: 14px;   
    --gap-section: 18px; 

    







    --wide-zoom: 1;
  }

  












  @media (min-width: 1680px) {
    :root { --wide-zoom: 1.1; }
    html { zoom: var(--wide-zoom); }
  }
  @media (min-width: 2560px) {
    :root { --wide-zoom: 1.4; }
  }

  



  @media (max-width: 640px) {
    :root { --field-text-min: 16px; }
  }
}