/* ==========================================================================
   DEP Design System — Colors & Type
   PT Dinamika Electro Plating
   ========================================================================== */

/* Brand webfonts — Barlow (display), Inter (body), JetBrains Mono (mono).
   Loaded from Google Fonts. These are the official typefaces of the DEP
   design system. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand core ---- */
  --dep-blue:        #054493;   /* primary brand blue (DEP wordmark) */
  --dep-blue-deep:   #033574;   /* hover / pressed */
  --dep-blue-ink:    #021E45;   /* text on light */
  --dep-blue-tint:   #E8EEF8;   /* surface tint */

  --dep-red:         #CD090B;   /* accent red (logo border) */
  --dep-red-deep:    #A60709;
  --dep-red-tint:    #FBE7E7;

  /* ---- Neutrals (cool steel — fits the metalwork industry) ---- */
  --steel-50:  #F6F8FB;
  --steel-100: #ECEFF4;
  --steel-200: #DCE2EC;
  --steel-300: #BFC8D6;
  --steel-400: #8E9AAE;
  --steel-500: #5F6C82;
  --steel-600: #45526A;
  --steel-700: #2E3849;
  --steel-800: #1B2230;
  --steel-900: #0E1320;

  --white: #FFFFFF;
  --black: #000000;

  /* ---- Semantic ---- */
  --bg:            var(--white);
  --bg-muted:      var(--steel-50);
  --bg-inverse:    var(--dep-blue-ink);
  --surface:       var(--white);
  --surface-tint:  var(--dep-blue-tint);

  --fg:            var(--steel-800);
  --fg-muted:      var(--steel-600);
  --fg-soft:       var(--steel-500);
  --fg-on-brand:   var(--white);
  --fg-link:       var(--dep-blue);
  --fg-link-hover: var(--dep-red);

  --border:         var(--steel-200);
  --border-strong:  var(--steel-300);
  --border-brand:   var(--dep-blue);

  --success: #2E7D32;
  --warning: #B86E00;
  --danger:  var(--dep-red);
  --info:    var(--dep-blue);

  /* ---- Type families ---- */
  --font-display: 'Barlow', 'Helvetica Neue', Arial, sans-serif;   /* headlines, wordmark, big numbers */
  --font-body:    'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Type scale ---- */
  --fs-12: 0.75rem;   --fs-14: 0.875rem;  --fs-16: 1rem;
  --fs-18: 1.125rem;  --fs-20: 1.25rem;   --fs-24: 1.5rem;
  --fs-30: 1.875rem;  --fs-36: 2.25rem;   --fs-48: 3rem;
  --fs-60: 3.75rem;   --fs-72: 4.5rem;

  /* ---- Spacing (4px grid) ---- */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;

  /* ---- Radii ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;
  --r-logo: 34px;   /* matches the rounded rectangle of the logo border */

  /* ---- Borders ---- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;     /* "logo-style" thick border (red accent) */

  /* ---- Shadows (soft, industrial — never glassy) ---- */
  --shadow-1: 0 1px 2px rgba(14,19,32,0.06), 0 1px 1px rgba(14,19,32,0.04);
  --shadow-2: 0 4px 10px rgba(14,19,32,0.08), 0 1px 2px rgba(14,19,32,0.05);
  --shadow-3: 0 12px 28px rgba(14,19,32,0.10), 0 2px 4px rgba(14,19,32,0.06);
  --shadow-brand: 0 8px 24px rgba(5,68,147,0.18);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --gutter:        clamp(16px, 4vw, 32px);
}

/* ==========================================================================
   Semantic typography
   ========================================================================== */
html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  color: var(--dep-blue-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

h1, .h1 { font-size: clamp(var(--fs-36), 5vw, var(--fs-72)); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
h2, .h2 { font-size: clamp(var(--fs-30), 3.6vw, var(--fs-48)); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--fs-24); font-weight: 700; line-height: 1.2; }
h4, .h4 { font-size: var(--fs-20); font-weight: 700; line-height: 1.25; }
h5, .h5 { font-size: var(--fs-18); font-weight: 600; line-height: 1.3; }
h6, .h6 { font-size: var(--fs-14); font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); }

p     { margin: 0 0 1em; text-wrap: pretty; }
small { font-size: var(--fs-14); color: var(--fg-muted); }
strong{ font-weight: 700; color: var(--dep-blue-ink); }
a     { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--fg-link-hover); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--steel-100);
  border-radius: var(--r-sm);
  padding: 0.1em 0.35em;
}

/* Eyebrow label — used a lot in B2B content */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dep-red);
}

/* Display number — for big stats: "1983", "40+ Years" */
.display-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--fs-48), 8vw, var(--fs-72));
  line-height: 0.95;
  color: var(--dep-blue);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Utilities */
.text-blue   { color: var(--dep-blue); }
.text-red    { color: var(--dep-red); }
.text-muted  { color: var(--fg-muted); }
.bg-blue     { background: var(--dep-blue); color: var(--white); }
.bg-tint     { background: var(--surface-tint); }