/* =================================================================
   Procomin Design System — Colors & Type
   Industrial B2B · Minerales No Metálicos
   Emerald green + heritage red · Technical, grounded, premium
   ================================================================= */

/* -----------------------------------------------------------------
   FONTS
   - Display: Barlow Condensed — uppercase, structured, industrial.
     Substitutes the original repo's Poppins, which reads too soft
     for a mineral processor. Inter remains for body.
   - Body: Inter — humanist sans, optimized for dense technical copy.
   - Mono: JetBrains Mono — granulometry, malla, technical specs.
   ----------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===============================================================
     COLOR — RAW PALETTE
     Two brand hues — emerald green (workhorse) + heritage red
     (foil stamp) — plus warm stone and cool slate neutrals.
     =============================================================== */

  /* Green — primary brand color. Inherited from the live site
     (Tailwind emerald-600 #059669). Use 500 as the canonical CTA
     color, 700/800 as dark "weight" surfaces (trust strip, hero
     overlay), 100/50 as tinted backgrounds. */
  --green-950: #022C1A;   /* deep press, rarely used */
  --green-900: #034028;   /* dark surface (footer alt, hero overlay) */
  --green-800: #045534;   /* elevated dark surface */
  --green-700: #047857;   /* hover on dark, card backgrounds */
  --green-600: #065F46;   /* legacy "teal" from tailwind config */
  --green-500: #059669;   /* PRIMARY BRAND GREEN — buttons, CTAs */
  --green-400: #34B383;   /* hover for green-500 in light usage */
  --green-300: #6CC7A1;
  --green-200: #A8DCC4;
  --green-100: #D1FAE5;   /* tinted backgrounds, icon halos */
  --green-50:  #ECFDF5;   /* near-white green tint */

  /* Red — heritage brand mark. Pulled from the logomark (#FF0000)
     and refined to read better in UI without losing the heritage
     punch. Used like a foil stamp: eyebrows, hairlines, key
     highlights, the logo. Never a flood color. */
  --red-950: #3B0A0A;
  --red-900: #5C0F0F;
  --red-800: #7F1717;
  --red-700: #9F1D1D;
  --red-600: #C0211E;   /* hover */
  --red-500: #D62828;   /* PRIMARY BRAND RED — accent, foil stamp */
  --red-400: #E25656;
  --red-300: #ED8585;
  --red-200: #F5B5B5;
  --red-100: #FBDDDD;
  --red-50:  #FDF0F0;

  /* Heritage logomark — pure red as used in the SVG.
     Preserved for the mark itself only; never used in UI chrome. */
  --logo-red: #FF0000;

  /* Ink — deep neutral dark surfaces. Distinct from green so that
     emerald can stand out as a bold color block on dark sections.
     Used for footer, product card backs, and "weight" panels that
     should feel like printed metal rather than mineral. */
  --ink-950: #0B0E10;
  --ink-900: #14181B;
  --ink-800: #1F2429;
  --ink-700: #2C333A;

  /* Stone — warm neutrals. Paper-like backgrounds, muted surfaces.
     Carries a hint of warmth so the system doesn't feel cold. */
  --stone-900: #2A2620;
  --stone-800: #3D362C;
  --stone-700: #5C5246;
  --stone-500: #8C8275;
  --stone-300: #C7BFB1;
  --stone-200: #DDD6C9;
  --stone-100: #EDE8DC;
  --stone-50:  #F6F2E8;

  /* Slate — cool neutrals for technical surfaces (specs tables,
     code, captions). Matches the warmer ink without competing. */
  --slate-900: #14181F;
  --slate-700: #3A4252;
  --slate-500: #6B7280;
  --slate-300: #C2C7D0;
  --slate-100: #E9EBEF;
  --slate-50:  #F6F7F9;

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* Semantic accents — used sparingly. Note: success uses the
     darker green-700 to read distinct from the brand green-500. */
  --success-700: #1F5132;
  --success-500: #2E7D4F;
  --warning-700: #8A5A12;
  --warning-500: #C28223;
  --danger-700:  #7E1D1D;   /* aligns with red-800 */
  --danger-500:  #B12A2A;
  --info-500:    #2C5A8A;

  /* ===============================================================
     COLOR — SEMANTIC TOKENS
     =============================================================== */

  /* Surfaces (light theme — default) */
  --bg:           var(--white);
  --bg-paper:    var(--stone-50);     /* warm paper-like */
  --bg-muted:    var(--slate-50);
  --bg-inverse:  var(--ink-900);      /* dark sections in a light page */

  --surface:     var(--white);
  --surface-2:   var(--stone-50);
  --surface-3:   var(--slate-100);
  --surface-dark: var(--ink-900);
  --surface-dark-2: var(--ink-800);
  --surface-green: var(--green-700);  /* bold green color blocks */

  /* Foreground / text */
  --fg-1:  var(--ink-950);    /* primary headings */
  --fg-2:  var(--slate-700);  /* body */
  --fg-3:  var(--slate-500);  /* secondary / captions */
  --fg-4:  var(--slate-300);  /* disabled */

  --fg-on-dark-1: var(--white);
  --fg-on-dark-2: #D8DEE3;
  --fg-on-dark-3: #97A0A8;

  --fg-on-green-1: var(--white);
  --fg-on-green-2: var(--green-100);
  --fg-on-green-3: #A8DCC4;

  /* Borders / dividers */
  --border:        rgba(11, 14, 16, 0.10);
  --border-strong: rgba(11, 14, 16, 0.18);
  --border-dark:   rgba(255, 255, 255, 0.10);
  --border-dark-strong: rgba(255, 255, 255, 0.18);
  --border-red:    var(--red-500);
  --border-green:  var(--green-500);

  /* Brand */
  --brand:         var(--green-500);   /* primary brand identity */
  --brand-dark:    var(--green-700);
  --brand-accent:  var(--red-500);     /* heritage foil-stamp accent */
  --brand-accent-hover: var(--red-600);

  /* Action — emerald green is the primary action color */
  --action:        var(--green-500);
  --action-hover:  var(--green-700);
  --action-fg:     var(--white);

  /* Accent — red is the foil-stamp accent */
  --accent:        var(--red-500);
  --accent-hover:  var(--red-600);
  --accent-fg:     var(--white);

  /* Focus ring — green, picked up from the live site's CTA color */
  --focus-ring: 0 0 0 3px rgba(5, 150, 105, 0.40);

  /* ===============================================================
     TYPOGRAPHY
     =============================================================== */

  --font-display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — measured for technical density.
     Modular ratio: ~1.25, but with tighter control at the top. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* eyebrows, labels */
  --tracking-widest: 0.22em;   /* section dividers */

  /* ===============================================================
     SPACING (4px base)
     =============================================================== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===============================================================
     RADII — restrained. Industrial signage uses sharp corners; we
     allow 6–10px on cards (matches the live site's softer Tailwind
     defaults). Pills only for status tags.
     =============================================================== */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;     /* cards, inputs */
  --radius-lg:   10px;
  --radius-xl:   16px;    /* feature cards, hero panels */
  --radius-2xl:  20px;    /* live site uses ~rounded-2xl on cards */
  --radius-pill: 999px;   /* status tags, primary nav CTAs */

  /* ===============================================================
     ELEVATION — hard, low-spread shadows. Industrial/printed feel.
     =============================================================== */
  --shadow-xs: 0 1px 1px rgba(11, 14, 16, 0.06);
  --shadow-sm: 0 1px 2px rgba(11, 14, 16, 0.08), 0 1px 1px rgba(11, 14, 16, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(11, 14, 16, 0.10), 0 2px 4px -1px rgba(11, 14, 16, 0.06);
  --shadow-lg: 0 10px 18px -6px rgba(11, 14, 16, 0.18), 0 4px 8px -2px rgba(11, 14, 16, 0.08);
  --shadow-xl: 0 24px 36px -10px rgba(11, 14, 16, 0.22), 0 8px 12px -4px rgba(11, 14, 16, 0.10);

  /* Brand glows — green for primary CTAs, red for heritage accents.
     Used sparingly. */
  --shadow-green-sm: 0 2px 8px rgba(5, 150, 105, 0.30);
  --shadow-green-md: 0 6px 22px rgba(5, 150, 105, 0.35);
  --shadow-red-sm:   0 2px 8px rgba(214, 40, 40, 0.25);
  --shadow-red-md:   0 6px 22px rgba(214, 40, 40, 0.30);

  /* inner shadow used on inputs */
  --shadow-inset: inset 0 1px 2px rgba(11, 14, 16, 0.08);

  /* ===============================================================
     MOTION — minimal, never bouncy. Industrial = decisive.
     =============================================================== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;

  /* ===============================================================
     LAYOUT
     =============================================================== */
  --container-max: 1280px;
  --container-pad: 24px;
}

/* =================================================================
   SEMANTIC ELEMENT STYLES
   These can be applied directly via classes (.h1, .body, .eyebrow…)
   or you can use them as a reference and copy values into components.
   ================================================================= */

.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

/* Display / hero */
.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 6vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* H1 — page title */
.h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* H2 — section title */
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* H3 — sub-section */
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-1);
}

/* H4 — card title */
.h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--fg-1);
}

/* Eyebrow — small uppercase label above headings.
   The most distinctive Procomin type treatment.
   Uses heritage red as the foil-stamp accent. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--red-500);
}

.eyebrow--on-dark { color: var(--red-400); }
.eyebrow--green   { color: var(--green-500); }
.eyebrow--neutral { color: var(--slate-500); }

/* Body */
.body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Mono — used for technical specs, granulometry, malla numbers */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0;
}

/* Big metric numerals — for stat blocks. */
.metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-6xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.metric--green { color: var(--green-500); }
.metric--red   { color: var(--red-500); }