/* ============================================================
   SONOVAL SA — Design System
   colors_and_type.css
   Foundations: color tokens + semantic colors + type system.
   Brand: scénique / dark. Pure black, vivid red, white.
   ============================================================ */

/* ---- Fonts ----------------------------------------------------
   The construction page headline is a heavy rounded geometric sans.
   Closest widely-available match = Poppins (display).
   Body/UI paired with Manrope (clean modern grotesque).
   NOTE: these are Google Font substitutes — the original webfont
   files were not provided. See README "Type" + caveats.
----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand palette ---- */
  --black:        #000000;  /* page background */
  --red:          #E2011B;  /* PRIMARY accent — sampled from logo */
  --red-bright:   #FF2233;  /* hover / glow */
  --red-deep:     #A8010F;  /* pressed / deep */
  --white:        #FFFFFF;

  /* ---- Neutral / ink scale (cool near-blacks for surfaces) ---- */
  --ink-950: #050506;
  --ink-900: #0B0B0D;   /* primary surface on black */
  --ink-850: #111114;
  --ink-800: #16161A;   /* raised surface / cards */
  --ink-700: #202024;   /* hover surface */
  --ink-600: #2C2C32;   /* strong border */

  /* ---- Greys for text on dark ---- */
  --grey-100: #F4F4F6;
  --grey-300: #C9C9CF;  /* secondary text */
  --grey-400: #9A9AA3;  /* tertiary / captions */
  --grey-500: #6C6C75;  /* disabled / faint */

  /* ---- Hairlines (alpha over black) ---- */
  --line-faint:  rgba(255,255,255,0.07);
  --line:        rgba(255,255,255,0.12);
  --line-strong: rgba(255,255,255,0.20);
  --line-red:    rgba(226,1,27,0.55);

  /* ---- Semantic colors ---- */
  --bg:            var(--black);
  --surface:       var(--ink-900);
  --surface-raised:var(--ink-800);
  --surface-hover: var(--ink-700);
  --border:        var(--line);
  --border-faint:  var(--line-faint);

  --fg:            var(--white);
  --fg-secondary:  var(--grey-300);
  --fg-muted:      var(--grey-400);
  --fg-faint:      var(--grey-500);

  --accent:        var(--red);
  --accent-hover:  var(--red-bright);
  --accent-press:  var(--red-deep);
  --on-accent:     var(--white);

  --focus-ring:    rgba(226,1,27,0.55);

  /* ---- Scenic glow (stage-light motif; use sparingly) ---- */
  --glow-red: radial-gradient(60% 60% at 50% 0%, rgba(226,1,27,0.28) 0%, rgba(226,1,27,0.06) 38%, transparent 72%);
  --glow-white: radial-gradient(50% 50% at 50% 0%, rgba(255,255,255,0.10) 0%, transparent 70%);

  /* ---- Typography families ---- */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Type scale (display = Poppins, body = Manrope) ---- */
  --fs-display:  clamp(3.5rem, 8vw, 7rem);   /* hero headline, UPPERCASE */
  --fs-h1:       clamp(2.6rem, 5vw, 4.25rem);
  --fs-h2:       clamp(2rem, 3.4vw, 3rem);
  --fs-h3:       1.625rem;   /* 26px */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-lead:     1.25rem;    /* 20px intro paragraph */
  --fs-body:     1.0625rem;  /* 17px */
  --fs-small:    0.9375rem;  /* 15px */
  --fs-label:    0.8125rem;  /* 13px overline / eyebrow */
  --fs-caption:  0.75rem;    /* 12px */

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

  /* ---- Radii (mostly sharp; selective softness) ---- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Elevation / shadow (on black, shadows are subtle; glow does the lifting) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.6);
  --shadow:    0 8px 30px rgba(0,0,0,0.55);
  --shadow-red: 0 10px 40px rgba(226,1,27,0.25);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1440px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these classes (or copy the rules) for consistent type.
   ============================================================ */

.ds-display{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--fg);
}
h1, .ds-h1{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg);
}
h2, .ds-h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg);
}
h3, .ds-h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
}
h4, .ds-h4{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg);
}
.ds-lead{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-secondary);
}
p, .ds-body{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--fg-secondary);
}
.ds-small{
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-muted);
}
/* Eyebrow / overline — the brand's signature label treatment */
.ds-eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.ds-caption{
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--fg-faint);
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ color: var(--accent-hover); }