/*!
 * labcare.com.vn — Máy Nghiền Đá Thanh Long · Design tokens
 * Developed by Tran Thanh (IT Developer) — see /humans.txt
 * © 2005–2026. Original work — unauthorized copying prohibited.
 */

:root {
  --author: "Tran Thanh · TT-LBC-2026"; 
  
  --brand-ink:        #1A1C5C;   
  --brand-primary:    #3E4095;   
  --brand-primary-2:  #3A3DAD;   
  --brand-tint:       #EAEBF5;
  --brand-line:       #D2D4EA;

  --sector-electrical: #3E4095;
  --sector-electrical-soft: rgba(62, 64, 149, 0.08);
  --sector-software:   #39B54A;
  --sector-software-soft: rgba(57, 181, 74, 0.10);
  --sector-mechanical: #00AEEF;
  --sector-mechanical-soft: rgba(0, 174, 239, 0.10);

  --brand-accent:     #00AEEF;   
  --brand-accent-2:   #008CC2;
  --brand-accent-green: #39B54A; 

  --paper:            #EEF0F3;   
  --paper-2:          #E4E7EC;   
  --bone:             #F8F9FB;   
  --canvas:           #FFFFFF;   

  --ink-0:   #11132A;
  --ink-1:   #1A1C36;
  --ink-2:   #2A2C3E;
  --ink-3:   #444657;
  --ink-4:   #6B6D80;
  --ink-5:   #6E7082; 
  --ink-6:   #BCBEC9;
  --ink-7:   #DCDDE3;
  --ink-8:   #EDEEF2;

  --bg:           var(--paper);
  --bg-soft:      var(--paper-2);
  --bg-card:      var(--bone);
  --bg-raised:    var(--canvas);
  --bg-invert:    var(--ink-0);

  --text:         var(--ink-0);
  --text-soft:    #3A3D52;
  --text-mute:    #5C5F73;   
  --text-faint:   var(--ink-5);
  --text-invert:  var(--paper);

  --line:         rgba(26, 28, 92, 0.10);
  --line-strong:  rgba(26, 28, 92, 0.18);
  --line-faint:   rgba(26, 28, 92, 0.05);

  --accent:       var(--brand-ink);
  --link:         var(--brand-primary);
  --focus:        0 0 0 3px rgba(62, 64, 149, 0.65); 

  --ff-display:  'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --ff-body:     'Inter', system-ui, -apple-system, sans-serif;
  --ff-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-1:        0.625rem;     
  --fs-2:        0.6875rem;    
  --fs-3:        0.75rem;      
  --fs-4:        0.875rem;     
  --fs-5:        1rem;         
  --fs-6:        1.1875rem;    

  --fs-7:        clamp(1.375rem, calc(1.25rem + 0.5vw), 1.75rem);   
  --fs-8:        clamp(1.75rem,  calc(1.5rem  + 1vw),   2.5rem);    
  --fs-9:        clamp(2.5rem,   calc(2rem    + 2vw),   4rem);      
  --fs-display:  clamp(3.5rem,   calc(2rem    + 4vw),   6rem);      

  --fs-tiny:     var(--fs-1);
  --fs-caption:  var(--fs-2);
  --fs-eyebrow:  var(--fs-2);
  --fs-xs:       var(--fs-3);
  --fs-sm:       var(--fs-4);
  --fs-base:     var(--fs-5);
  --fs-lead:     var(--fs-6);
  --fs-h5:       var(--fs-5);
  --fs-h4:       var(--fs-7);
  --fs-h3:       var(--fs-7);
  --fs-h2:       var(--fs-8);
  --fs-h1:       var(--fs-9);

  --lh-display:  0.95;
  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-h3:       1.25;
  --lh-lead:     1.5;
  --lh-base:     1.55;
  --lh-relaxed:  1.7;
  --lh-caption:  1.4;
  --lh-loose:    var(--lh-relaxed);

  --track-display:    -0.035em;
  --track-h1:         -0.025em;
  --track-h2:         -0.02em;
  --track-h3:         -0.01em;
  --track-snug:       -0.005em;
  --track-uppercase:   0.1em;
  --track-eyebrow:     0.14em;
  --track-tight:       var(--track-h2);

  --bp-sm:    30em;    
  --bp-md:    48em;    
  --bp-lg:    64em;    
  --bp-xl:    80em;    
  --bp-2xl:   96em;    

  --touch-min:    44px;
  --input-fs:     16px;
  --safe-top:     env(safe-area-inset-top, 0);
  --safe-right:   env(safe-area-inset-right, 0);
  --safe-bottom:  env(safe-area-inset-bottom, 0);
  --safe-left:    env(safe-area-inset-left, 0);

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 112px;
  --s-13: 160px;

  --section-pad: clamp(56px, 9vw, 128px);

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 10px;
  --r-pill: 999px;

  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --container:        1440px;
  --container-narrow:  860px;
  --container-wide:   1600px;
  --pad-x:            clamp(16px, 2.5vw, 32px);

  --z-header:    100;
  --z-sticky:    200;
  --z-overlay:   800;
  --z-modal:    1000;
}

[data-theme="dark"] {
  --bg:           #15171F;
  --bg-soft:      #1B1D27;
  --bg-card:      #232631;
  --bg-raised:    #2A2D3A;

  --text:         #EDEEF2;
  --text-soft:    #B4B6BF;
  --text-mute:    #9598A4;
  --text-faint:   #868995;

  --line:         rgba(237, 238, 242, 0.07);
  --line-strong:  rgba(237, 238, 242, 0.16);
  --line-faint:   rgba(237, 238, 242, 0.04);

  --accent:       #EDEEF2;
  --link:         #9698E0;
  --brand-tint:   rgba(120, 122, 200, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; }
}

html {
  -webkit-tap-highlight-color: rgba(0, 174, 239, 0.12);
  -webkit-text-size-adjust: 100%;
}
input, textarea, select {
  font-size: var(--input-fs);
  font-family: var(--ff-body);
}
button, [role="button"], a.btn, .btn,
input[type="button"], input[type="submit"] {
  min-height: var(--touch-min);
}