:root {
  
  --slog-znak: 0.6875rem;                          
  --slog-sitno: 0.8125rem;                         
  --slog-telo: 1rem;                               
  --slog-vodeci: clamp(1.125rem, 1.5vw, 1.25rem);  
  --slog-3: clamp(1.3rem, 1.5vw, 1.5rem);          
  --slog-2: clamp(1.875rem, 3.6vw, 2.375rem);      
  --slog-1: clamp(2.375rem, 4.6vw, 3.5rem);        
  --slog-display: clamp(2.5rem, min(6.6vw, 10vh), 4.5rem);
  

  
  --red-display: 1.1;                              
  --red-naslov: 1.04;
  --red-3: 1.15;
  --red-telo: 1.625;                               

  
  --zbij-display: -0.025em;                        
  --zbij-1: -0.025em;
  --zbij-2: -0.02em;
  --zbij-3: -0.015em;
  --razmak-znak: 0.18em;                           
  --razmak-sitno: 0.02em;

  --debljina-slog: 400;
  --debljina-glas: 600;                            

  --pismo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  
  --mastilo: #101010;          
  --mastilo-tiho: #5a6067;     
  --linija: #dcdfe3;           
  --ploha-tiha: #f2f3f5;       
  --ploha: #ffffff;

  
  --znak: #ff671c;
  --znak-jace: #ff804f;        
  --znak-slog: #a63c15;        

  
  --materijal: #e7e4e0;

  

  
  --kriva: cubic-bezier(0.1, 0.2, 0.2, 1);
  --brzo: 0.2s;                
  --sporo: 0.4s;               
  --korak: 0.12s;              

  
  --p1: 0.5rem;
  --p2: 1rem;
  --p3: 1.5rem;
  --p4: 2.5rem;
  --p5: 4rem;
  --p6: clamp(4.5rem, 8vw, 8rem);   

  --sirina: 1240px;
  --zid: clamp(1.25rem, 4vw, 2.5rem);

  
  --radijus: 16px;
  --radijus-malo: 10px;

  
  --krov: 36deg;

  
  --visina-zaglavlja: 80px;

  
  --pojas-ispod-tla: calc(max(100vh, 56.25vw) / 9);

  
  --kadar-snimka: 50% 12%;   
}

@media (min-width: 2560px) {
  :root {
    --slog-display: 6rem;      
    --slog-1: 4.625rem;        
    --slog-2: 3rem;            
    --slog-3: 1.625rem;        
  }
}

@media (max-width: 820px) {
  :root {
    --slog-display: clamp(2.125rem, 9.4vw, 6rem);   
    --slog-1: clamp(2.25rem, 8vw, 4.625rem);
    --slog-vodeci: 1rem;
    
    --slog-znak: 0.625rem;
    --razmak-znak: 0.09em;
  }
}

.na-tamnom {
  --mastilo: #ffffff;
  --mastilo-tiho: #9aa1a8;     
  --linija: rgba(255, 255, 255, 0.16);
  --ploha: #101010;
  --ploha-tiha: #101010;
  --materijal: #2b2824;        
  --znak-slog: var(--znak);    
  color: var(--mastilo);
  background: var(--ploha);
}