/* ============================================================
   MAS VINTAGE — Foundations: Color + Type
   Global supplier of polymer products. Strict, laconic, light,
   flat (borders not shadows), contrasting green CTA on blue brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- Brand (from logo) ---- */
  --brand:        #197DB2;   /* MAS Vintage cerulean — identity blue */
  --brand-deep:   #13648F;   /* hover / darker fills */
  --brand-ink:    #0E4E72;   /* deepest blue, text on tint */
  --brand-tint:   #D7E8F2;   /* tinted fill */
  --brand-soft:   #EAF3F9;   /* faint wash / hover surface */
  --steel:        #AEB1B4;   /* logo wordmark gray — secondary mark / dividers */
  --steel-soft:   #DCDEE0;

  /* ---- CTA (contrasting action — red, with a subtle gradient on buttons) ---- */
  --cta:          #C22F1A;   /* solid red — small accents / focus */
  --cta-hover:    #A82614;
  --cta-active:   #8C1D0F;
  --cta-soft:     #FBEAE6;   /* soft action surface */
  --cta-grad:        linear-gradient(180deg, #D6402A 0%, #B0250F 100%);
  --cta-grad-hover:  linear-gradient(180deg, #C5371F 0%, #971F0C 100%);
  --focus-ring-cta:  0 0 0 3px rgba(194,47,26,0.26);

  /* ---- Ink / text ---- */
  --ink:          #14181B;   /* headings & primary text (cool near-black) */
  --ink-2:        #424B52;   /* body secondary */
  --ink-3:        #6B757D;   /* muted, captions, labels */
  --ink-4:        #98A2AA;   /* faint, placeholder, disabled */

  /* ---- Surfaces ---- */
  --canvas:       #FFFFFF;   /* default page */
  --canvas-soft:  #F5F6F7;   /* alternating section band */
  --canvas-muted: #EDEFF1;   /* inset wells, image backdrops */
  --ink-section:  #11171C;   /* the one dark band (charcoal) */
  --ink-section-2:#1B242B;   /* dark card on dark band */

  /* ---- Lines / borders (elevation lives here, not shadows) ---- */
  --line:         #E4E7EA;
  --line-strong:  #CFD4D8;
  --line-dark:    #2A343B;   /* hairline on dark surfaces */

  /* ---- On-dark text ---- */
  --on-dark:      #FFFFFF;
  --on-dark-2:    #B6C2CB;
  --on-dark-3:    #7E8C96;

  /* ---- Type families ---- */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Radii (tight = engineered) ---- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---- Spacing (4-base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---- The single, restrained shadow (used sparingly; brand is flat) ---- */
  --shadow-hairline: 0 1px 0 rgba(20,24,27,0.04);
  --focus-ring: 0 0 0 3px rgba(25,125,178,0.28);
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Display & headings: Hanken Grotesk, weighty + negative tracking.
   Body: 400, comfortable line-height. Eyebrows/specs: mono.
   ============================================================ */

.t-display-2xl { font-family: var(--font-sans); font-weight: 600; font-size: 64px; line-height: 1.04; letter-spacing: -0.022em; color: var(--ink); }
.t-display-xl  { font-family: var(--font-sans); font-weight: 600; font-size: 52px; line-height: 1.06; letter-spacing: -0.02em;  color: var(--ink); }
.t-display-lg  { font-family: var(--font-sans); font-weight: 600; font-size: 40px; line-height: 1.08; letter-spacing: -0.018em; color: var(--ink); }
.t-display-md  { font-family: var(--font-sans); font-weight: 600; font-size: 32px; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); }

.t-heading-lg  { font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 1.22; letter-spacing: -0.01em;  color: var(--ink); }
.t-heading-md  { font-family: var(--font-sans); font-weight: 600; font-size: 20px; line-height: 1.3;  letter-spacing: -0.006em; color: var(--ink); }
.t-heading-sm  { font-family: var(--font-sans); font-weight: 600; font-size: 17px; line-height: 1.4;  letter-spacing: 0;        color: var(--ink); }

.t-body-lg     { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 1.6;  letter-spacing: 0; color: var(--ink-2); }
.t-body-md     { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.6;  letter-spacing: 0; color: var(--ink-2); }
.t-body-sm     { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.55; letter-spacing: 0; color: var(--ink-2); }

.t-label       { font-family: var(--font-sans); font-weight: 500; font-size: 13px; line-height: 1.3;  letter-spacing: 0;       color: var(--ink); }
.t-caption     { font-family: var(--font-sans); font-weight: 400; font-size: 13px; line-height: 1.5;  letter-spacing: 0;       color: var(--ink-3); }

/* Eyebrow / kicker — mono, uppercase, wide tracking. The technical signature. */
.t-eyebrow     { font-family: var(--font-mono); font-weight: 600; font-size: 12px; line-height: 1;    letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); }
/* Spec / data — mono, used for grades, codes, measurements */
.t-spec        { font-family: var(--font-mono); font-weight: 400; font-size: 13px; line-height: 1.5;  letter-spacing: -0.01em; color: var(--ink-2); }

/* Optional base reset hook for full pages */
.mv-root { font-family: var(--font-sans); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }