/* ============================================================
   ISOBEX LASERS — Foundations: Color & Type
   Industrial laser systems, parts, and support built to
   maximise uptime. Confident · Technical · Fast-response.
   ============================================================ */

/* --- Webfont: Uncut Sans (SIL OFL, Kasper Nordkvist) ---------
   Brand font used across the live site. Self-hosted from /fonts.
   Heaviest cut shipped is Bold (700) — there is no 800/Black. */
@font-face { font-family: 'Uncut Sans'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('fonts/UncutSans-Light.woff2') format('woff2'), url('fonts/UncutSans-Light.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 300; font-style: italic; font-display: swap;
  src: url('fonts/UncutSans-LightItalic.woff2') format('woff2'), url('fonts/UncutSans-LightItalic.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/UncutSans-Regular.woff2') format('woff2'), url('fonts/UncutSans-Regular.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 400; font-style: italic; font-display: swap;
  src: url('fonts/UncutSans-RegularItalic.woff2') format('woff2'), url('fonts/UncutSans-RegularItalic.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/UncutSans-Medium.woff2') format('woff2'), url('fonts/UncutSans-Medium.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 500; font-style: italic; font-display: swap;
  src: url('fonts/UncutSans-MediumItalic.woff2') format('woff2'), url('fonts/UncutSans-MediumItalic.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('fonts/UncutSans-Semibold.woff2') format('woff2'), url('fonts/UncutSans-Semibold.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 600; font-style: italic; font-display: swap;
  src: url('fonts/UncutSans-SemiboldItalic.woff2') format('woff2'), url('fonts/UncutSans-SemiboldItalic.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/UncutSans-Bold.woff2') format('woff2'), url('fonts/UncutSans-Bold.woff') format('woff'); }
@font-face { font-family: 'Uncut Sans'; font-weight: 700; font-style: italic; font-display: swap;
  src: url('fonts/UncutSans-BoldItalic.woff2') format('woff2'), url('fonts/UncutSans-BoldItalic.woff') format('woff'); }
/* Variable cut (300–700) for fine-grained weights where supported */
@font-face { font-family: 'Uncut Sans VF'; font-weight: 300 700; font-style: normal; font-display: swap;
  src: url('fonts/UncutSans-Variable.woff2') format('woff2-variations'); }

:root {
  /* ---------------------------------------------------------
     BRAND COLOR — Laser Red
     The single accent. Used sparingly: CTAs, the laser spark,
     active states, key numbers. Never tint large areas with it.
     --------------------------------------------------------- */
  --laser-50:  #FFECEC;
  --laser-100: #FFD2D3;
  --laser-300: #FB6F73;
  --laser-500: #F9282F;   /* PRIMARY — exact brand red */
  --laser-600: #E11218;   /* hover */
  --laser-700: #BE0D13;   /* press */

  /* ---------------------------------------------------------
     INK & NEUTRALS — cool slate, tinted toward the logo ink.
     Dark sections, body text, borders, surfaces.
     --------------------------------------------------------- */
  --ink:       #06212B;   /* primary text + dark backgrounds (logo ink) */
  --graphite:  #16323D;   /* raised dark surfaces on ink */
  --slate-700: #2C4751;   /* strong secondary text on light */
  --slate-500: #50686F;   /* secondary / body-muted text */
  --steel-400: #8499A0;   /* captions, disabled, meta */
  --line:      #DCE3E6;   /* hairline borders, dividers */
  --mist:      #ECF0F2;   /* subtle fills, hover rows */
  --paper:     #F5F7F8;   /* alternate page background */
  --white:     #FFFFFF;

  /* ---------------------------------------------------------
     SEMANTIC ROLES
     --------------------------------------------------------- */
  --fg-1: var(--ink);          /* primary text */
  --fg-2: var(--slate-500);    /* secondary text */
  --fg-3: var(--steel-400);    /* tertiary / meta */
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-2: #A9BAC1;     /* muted text on ink */
  --bg-1: var(--white);
  --bg-2: var(--paper);
  --bg-dark: var(--ink);
  --border: var(--line);
  --accent: var(--laser-500);
  --accent-hover: var(--laser-600);
  --focus-ring: var(--laser-500);

  /* status (kept industrial / muted) */
  --ok:    #1C8C5A;
  --warn:  #C9870A;
  --error: var(--laser-600);

  /* ---------------------------------------------------------
     TYPE FAMILIES
     One family does everything. Headings = uppercase + tight.
     --------------------------------------------------------- */
  --font-sans: 'Uncut Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'Uncut Sans Mono', ui-monospace, 'SFMono-Regular',
               'Roboto Mono', Menlo, Consolas, monospace;

  /* weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-black:   700;   /* heaviest Uncut Sans cut shipped */

  /* ---------------------------------------------------------
     TYPE SCALE — clamp() for fluid display sizes
     --------------------------------------------------------- */
  --fs-display: clamp(2.75rem, 1.2rem + 6vw, 5.5rem);   /* hero */
  --fs-h1: clamp(2.25rem, 1.2rem + 3.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.1rem + 2.2vw, 2.6rem);
  --fs-h3: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-eyebrow: 0.8125rem;   /* uppercase labels */
  --fs-lead: 1.25rem;        /* intro paragraphs */
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* tracking */
  --track-display: -0.02em;  /* tighten big bold caps */
  --track-eyebrow: 0.16em;   /* spaced-out labels */
  --track-body: 0;

  /* line-heights */
  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.6;

  /* ---------------------------------------------------------
     RADII — small & engineered, not pillowy
     --------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------------------------------------------------------
     SHADOWS — restrained, cool-tinted
     --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(6,33,43,0.08);
  --shadow-md: 0 6px 18px rgba(6,33,43,0.10);
  --shadow-lg: 0 20px 48px rgba(6,33,43,0.16);

  /* ---------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------- */
  --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;

  --container: 1240px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.ds-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}
.ds-h1 { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--track-display); text-transform: uppercase; color: var(--fg-1); text-wrap: balance; }
.ds-h2 { font-family: var(--font-display); font-weight: var(--w-bold);  font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg-1); text-wrap: balance; }
.ds-h3 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h3); line-height: 1.2; color: var(--fg-1); }
.ds-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: 1.3; color: var(--fg-1); }
.ds-lead { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); }
.ds-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.ds-small { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.ds-caption { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); }