/* =====================================================================
   ISS — Integral Supply & Services, C.A.
   Design Tokens · Color + Type Foundations
   ===================================================================== */

@font-face{font-family:'Lato';src:url('../fonts/Lato-Thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-ThinItalic.ttf') format('truetype');font-weight:100;font-style:italic;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Lato';src:url('../fonts/Lato-BlackItalic.ttf') format('truetype');font-weight:900;font-style:italic;font-display:swap;}

:root {
  --navy-900: #0A1F44;
  --navy-700: #142a5c;
  --navy-600: #1E2761;
  --navy-500: #29336f;

  --orange-500: #F47C20;
  --orange-600: #d96a12;
  --orange-400: #f9974a;
  --orange-100: #fde7d4;

  --white:     #FFFFFF;
  --gray-50:   #F8F9FB;
  --gray-100:  #F4F4F4;
  --gray-200:  #E6E8EC;
  --gray-300:  #CBD0D8;
  --gray-500:  #8A93A2;
  --slate-700: #3A4250;
  --slate-900: #1B2230;

  --fg-1: var(--slate-900);
  --fg-2: var(--slate-700);
  --fg-3: var(--gray-500);
  --fg-on-navy: rgba(255,255,255,0.92);
  --fg-on-navy-muted: rgba(255,255,255,0.62);

  --bg-1: var(--white);
  --bg-2: var(--gray-100);
  --bg-navy: var(--navy-900);
  --bg-accent: var(--orange-500);

  --border-1: var(--gray-200);
  --border-strong: var(--gray-300);

  --font-display: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display: 900 clamp(2.75rem, 5vw, 4.5rem)/1.04 var(--font-display);
  --text-h1: 900 clamp(2.25rem, 4vw, 3.25rem)/1.08 var(--font-display);
  --text-h2: 900 clamp(1.75rem, 3vw, 2.5rem)/1.12 var(--font-display);
  --text-h3: 700 clamp(1.3rem, 2vw, 1.6rem)/1.18 var(--font-display);
  --text-h4: 700 1.15rem/1.25 var(--font-display);
  --text-overline: 900 0.8rem/1.3 var(--font-display);
  --text-lead: 400 clamp(1.05rem, 1.4vw, 1.3rem)/1.6 var(--font-body);
  --text-body: 400 1rem/1.65 var(--font-body);
  --text-small: 400 0.875rem/1.55 var(--font-body);
  --text-caption: 500 0.75rem/1.4 var(--font-body);

  --tracking-overline: 0.18em;
  --tracking-tight: -0.02em;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10,31,68,0.06), 0 1px 3px rgba(10,31,68,0.08);
  --shadow-md: 0 4px 12px rgba(10,31,68,0.08), 0 2px 4px rgba(10,31,68,0.06);
  --shadow-lg: 0 18px 40px -12px rgba(10,31,68,0.22);
  --shadow-orange: 0 10px 24px -8px rgba(244,124,32,0.45);

  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin:0; font-family:var(--font-body); color:var(--fg-1); background:var(--white);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

h1{ font:var(--text-h1); letter-spacing:var(--tracking-tight); color:var(--navy-600); margin:0; }
h2{ font:var(--text-h2); letter-spacing:var(--tracking-tight); color:var(--navy-600); margin:0; }
h3{ font:var(--text-h3); color:var(--navy-600); margin:0; }
h4{ font:var(--text-h4); color:var(--navy-600); margin:0; }