/* =====================================================================
   SULPOL DESIGN SYSTEM — Colors & Type Tokens
   Brand: Sulpol Máquinas Injetoras (polyurethane metering / dosing machines)
   Palette is rooted in the physical product: matte-black steel frames,
   bright industrial green panels, white-painted control cabinets,
   warning-yellow safety labels, and the deep red "SP" plate accent.
   ===================================================================== */

/* ---------- Fonts -----------------------------------------------------
   Type system (v2): Archivo (display) + IBM Plex Sans (body/UI) + IBM Plex Mono.
   All loaded from local TTFs in /fonts/ so they work offline and don't
   depend on Google Fonts being reachable.
   ----------------------------------------------------------------------- */

/* Archivo — variable, display family */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url("fonts/Archivo-VariableFont_wdth_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url("fonts/Archivo-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
}

/* IBM Plex Sans — variable, body / UI */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-VariableFont_wdth_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
}

/* IBM Plex Mono — static instances (no variable file shipped) */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 100; src: url("fonts/IBMPlexMono-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 100; src: url("fonts/IBMPlexMono-ThinItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 200; src: url("fonts/IBMPlexMono-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 200; src: url("fonts/IBMPlexMono-ExtraLightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 300; src: url("fonts/IBMPlexMono-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 300; src: url("fonts/IBMPlexMono-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; src: url("fonts/IBMPlexMono-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 500; src: url("fonts/IBMPlexMono-MediumItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 600; src: url("fonts/IBMPlexMono-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 700; src: url("fonts/IBMPlexMono-BoldItalic.ttf") format("truetype"); font-display: swap; }

:root {
  /* =================================================================
     COLORS — Brand
     ================================================================= */

  /* Sulpol Green — taken from machine panels (ST-CE9). Bright, technical. */
  --sp-green-50:  #F1FAE0;
  --sp-green-100: #DDF3B5;
  --sp-green-200: #C2E782;
  --sp-green-300: #A5D94F;
  --sp-green-400: #8FCD2E;
  --sp-green-500: #7CC024;   /* PRIMARY — “Sulpol Green” */
  --sp-green-600: #65A11C;
  --sp-green-700: #4F7F16;
  --sp-green-800: #3A5F11;
  --sp-green-900: #243C0A;

  /* Steel Black — frame + chassis. True warm-black, never pure #000. */
  --sp-black-50:  #F5F5F4;
  --sp-black-100: #E6E6E4;
  --sp-black-200: #C9C9C5;
  --sp-black-300: #A2A29D;
  --sp-black-400: #6E6E69;
  --sp-black-500: #44443F;
  --sp-black-600: #2A2A26;
  --sp-black-700: #1A1A17;
  --sp-black-800: #111110;
  --sp-black-900: #0A0A09;   /* PRIMARY — “Steel Black” */

  /* Cabinet White — control-panel paint. Slightly warm off-white. */
  --sp-white:        #FAFAF7;
  --sp-white-paper:  #F4F2EC;   /* documents, light surfaces */
  --sp-white-panel:  #ECECE7;   /* heavier off-white seen on cabinets */

  /* Industrial Red — the diagonal accent inside the "SP" plate on the logo.
     Use sparingly: errors, brand badge, key call-outs. */
  --sp-red-500: #B41E1E;
  --sp-red-600: #931414;
  --sp-red-700: #6E0E0E;

  /* Hazard Yellow — adopted from the warning labels on every machine.
     Use sparingly: caution states, electrical / safety notices. */
  --sp-yellow-300: #FFE066;
  --sp-yellow-500: #FFC107;   /* "warning" */
  --sp-yellow-600: #D69E00;

  /* =================================================================
     COLORS — Semantic (foreground / background / lines)
     ================================================================= */

  --fg-1: var(--sp-black-900);   /* primary text */
  --fg-2: var(--sp-black-600);   /* secondary text */
  --fg-3: var(--sp-black-400);   /* tertiary / captions */
  --fg-mute: var(--sp-black-300);
  --fg-inverse: var(--sp-white);

  --bg-1: var(--sp-white);       /* page */
  --bg-2: var(--sp-white-paper); /* alt sections */
  --bg-3: var(--sp-white-panel); /* inset cards */
  --bg-inverse: var(--sp-black-900);

  --line-1: var(--sp-black-100); /* hairline */
  --line-2: var(--sp-black-200); /* divider */
  --line-strong: var(--sp-black-900);

  --accent: var(--sp-green-500);
  --accent-hover: var(--sp-green-600);
  --accent-press: var(--sp-green-700);
  --on-accent: var(--sp-black-900);     /* text on green is BLACK, not white */

  --danger: var(--sp-red-500);
  --warning: var(--sp-yellow-500);
  --success: var(--sp-green-600);
  --info: #1F6FB2;

  /* =================================================================
     TYPOGRAPHY (v2)
     - "Sulpol Display"  = Archivo (Google Fonts; weights 400–900).
        Slightly condensed, dense black weight (900) for hero headlines,
        big numbers, and model names. The "industrial" voice.
     - "Sulpol Sans"     = IBM Plex Sans. Body, paragraphs, marketing copy.
        Designed for IBM as an industrial brand face — has character without
        being decorative. Tabular numerals out of the box.
     - "Sulpol UI"       = IBM Plex Sans (same family, kept as separate var
        so we can swap later for HMI screens if needed).
     - Mono              = IBM Plex Mono. Pairs natively with Plex Sans.
        Part numbers, REV stamps, FT‑CE9 codes, schematic call‑outs.
     ================================================================= */

  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-sans:    "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui:      "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — designed for both print catalogues and screen */
  --t-hero:  clamp(48px, 6.4vw, 96px);  /* @kind font */
  --t-h1:    clamp(36px, 4.4vw, 64px);  /* @kind font */
  --t-h2:    clamp(28px, 3.2vw, 44px);  /* @kind font */
  --t-h3:    clamp(22px, 2.4vw, 30px);  /* @kind font */
  --t-h4:    20px;  /* @kind font */
  --t-body:  16px;  /* @kind font */
  --t-small: 14px;  /* @kind font */
  --t-micro: 12px;  /* @kind font */
  --t-eyebrow: 12px;  /* @kind font */ /* uppercase tracked label */

  --lh-tight:   1.05;  /* @kind font */
  --lh-display: 1.10;  /* @kind font */
  --lh-heading: 1.20;  /* @kind font */
  --lh-body:    1.55;  /* @kind font */
  --lh-loose:   1.70;  /* @kind font */

  --tr-tight:  -0.02em;  /* @kind font */
  --tr-normal:  0em;  /* @kind font */
  --tr-wide:    0.04em;  /* @kind font */
  --tr-eyebrow: 0.14em;  /* @kind font */

  /* =================================================================
     SPACING / RADII / SHADOWS / MOTION
     ================================================================= */

  --sp-0: 0;  /* @kind spacing */
  --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;

  /* Industrial look = tight radii. No pillowy buttons. */
  --r-0: 0;  /* @kind radius */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-pill: 999px;

  /* Shadows are restrained — this is heavy-machinery brand, not SaaS. */
  --sh-1: 0 1px 0 rgba(10,10,9,0.06), 0 1px 2px rgba(10,10,9,0.06);
  --sh-2: 0 2px 4px rgba(10,10,9,0.08), 0 8px 16px rgba(10,10,9,0.06);
  --sh-3: 0 8px 24px rgba(10,10,9,0.10), 0 24px 48px rgba(10,10,9,0.08);
  --sh-inset: inset 0 0 0 1px rgba(10,10,9,0.10);

  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.5, 0, 0.25, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-med:  220ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */
}

/* ---------- Semantic element styles ---------------------------------- */
html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-hero, h1.hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}
p, .p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
small, .small {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.93em;
}

/* Dark / inverted blocks (matte-black) */
.on-black {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.on-black .eyebrow,
.on-black p,
.on-black small { color: rgba(255,255,255,0.72); }
.on-black h1, .on-black h2, .on-black h3, .on-black h4 { color: var(--fg-inverse); }

/* On-green blocks (Sulpol Green) — text is always BLACK */
.on-green {
  background: var(--accent);
  color: var(--on-accent);
}
.on-green p, .on-green small, .on-green .eyebrow { color: rgba(10,10,9,0.78); }