/* =============================================================
   Iconomedia S2 — Design Tokens
   Colors & Typography
   =============================================================
   Brand: Iconomedia Saison 2
   Tagline: « Créateur de solutions retail opérationnelles et durables »
   System rooted in deep navy + recycled-material greens.
   ============================================================= */

/* ------------------------------
   Typography — brand typeface: Circular (user-supplied .otf files)
   Loaded from /fonts/. Mono fallback uses JetBrains Mono via Google Fonts.
   ------------------------------ */
@font-face {
  font-family: 'Circular';
  src: url('fonts/circular-book.woff2') format('woff2'),
       url('fonts/circular-book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/circular-medium.woff2') format('woff2'),
       url('fonts/circular-medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/circular-bold.woff2') format('woff2'),
       url('fonts/circular-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/circular-black.woff2') format('woff2'),
       url('fonts/circular-black.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============= COLOR — RAW PALETTE ============= */

  /* Core navy — drawn from the wordmark "iconomedia" */
  --navy-900: #06243F; /* deepest, hero backgrounds, footer */
  --navy-800: #0A2C4A; /* primary brand navy (from logo) */
  --navy-700: #143C5E; /* nav, headlines on light */
  --navy-600: #234E70; /* body on light backgrounds */
  --navy-500: #3D6585; /* muted navy / secondary text on light */
  --navy-300: #8AA1B6; /* tertiary, dividers on dark */
  --navy-100: #D8E0E8; /* subtle navy tint, hairlines on light */

  /* Recycled greens — drawn from the recycle arrows in the mark */
  --green-900: #0E4D3E; /* deepest forest */
  --green-700: #1A6E55; /* dominant brand green */
  --green-600: #2E8C6A; /* mid leaf */
  --green-500: #3DA67D; /* fresh sustainable green (CTAs, highlights) */
  --green-400: #5BC093; /* mint accent — the lighter recycled triangle */
  --green-exergue: #3daf7c; /* couleur d'exergue — bright highlight green from logo's lit triangle */
  --green-200: #B7E2CB; /* tint, badge backgrounds */
  --green-100: #E4F2EA; /* lightest tint, section bgs */

  /* Neutral / paper — recycled-paper warmth, kept very subtle */
  --paper-50:  #FBFAF7; /* page background warmer than pure white */
  --paper-100: #F4F2EC; /* section break, recycled paper feel */
  --paper-200: #E8E4D9; /* warm divider */
  --paper-300: #C9C3B3; /* warm muted border */

  --white:     #FFFFFF;
  --black:     #000000;

  /* Semantic */
  --signal-success: var(--green-500);
  --signal-warning: #C98A2B;
  --signal-error:   #B5432F;
  --signal-info:    var(--navy-700);

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

  /* Foreground */
  --fg-1: var(--navy-900);   /* primary text on light */
  --fg-2: var(--navy-700);   /* secondary headings */
  --fg-3: var(--navy-500);   /* body / supporting copy */
  --fg-4: var(--navy-300);   /* tertiary, captions */
  --fg-on-dark-1: var(--paper-50);
  --fg-on-dark-2: rgba(255,255,255,0.78);
  --fg-on-dark-3: rgba(255,255,255,0.55);
  --fg-accent: var(--green-700);

  /* Background */
  --bg-1: var(--paper-50);   /* canvas */
  --bg-2: var(--white);      /* cards */
  --bg-3: var(--paper-100);  /* alt sections */
  --bg-dark-1: var(--navy-900);
  --bg-dark-2: var(--navy-800);
  --bg-accent-soft: var(--green-100);

  /* Borders */
  --border-1: var(--paper-200);
  --border-2: var(--navy-100);
  --border-strong: var(--navy-700);
  --border-on-dark: rgba(255,255,255,0.12);

  /* Brand */
  --brand-navy: var(--navy-800);
  --brand-green: var(--green-700);
  --brand-green-bright: var(--green-500);
  --brand-mint: var(--green-400);
  --brand-exergue: var(--green-exergue); /* highlight / d'exergue accent */

  /* Gradient — the "recycled material" brand gradient,
     read from the logo: navy → forest → fresh green.
     Use sparingly: hero accents, key callouts. */
  --grad-recycle: linear-gradient(135deg, #002d4c 0%, #1A6E55 55%, #3daf7c 100%);
  --grad-recycle-soft: linear-gradient(135deg, var(--navy-100) 0%, var(--green-100) 100%);
  --grad-veil-dark: linear-gradient(180deg, rgba(6,36,63,0) 0%, rgba(6,36,63,0.85) 100%);

  /* ============= TYPE — RAW ============= */
  --font-sans: 'Circular', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Circular', 'Inter', system-ui, sans-serif;
  --font-mono: 'Circular', 'Inter', system-ui, sans-serif;

  /* Scale — modular ~1.22, generous for a one-page scrolling site
     with large imagery */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-60: 60px;
  --fs-72: 72px;
  --fs-96: 96px;
  --fs-128: 128px;

  /* Weights — Circular ships 4 cuts: Book 400, Medium 500, Bold 700, Black 800 */
  --fw-regular: 400; /* Circular Book */
  --fw-medium: 500;  /* Circular Medium */
  --fw-semibold: 700; /* aliased to Bold (no 600 cut shipped) */
  --fw-bold: 700;    /* Circular Bold */
  --fw-black: 800;   /* Circular Black */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-display: -0.02em; /* large display tightens */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-eyebrow: 0.14em;  /* uppercase eyebrow / kicker */
  --ls-button: 0.04em;

  /* ============= SPACING & LAYOUT ============= */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-72: 72px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;

  /* Section rhythm — one-page scrolling site needs generous breathing */
  --section-pad-y: clamp(80px, 10vw, 160px);
  --container: 1280px;
  --container-narrow: 880px;

  /* Radii — restrained. Premium feel = small, consistent radii.
     We use organic (large) only on full-bleed media frames. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadows — soft, low. Premium ≠ heavy drop shadows. */
  --shadow-xs: 0 1px 2px rgba(6,36,63,0.04);
  --shadow-sm: 0 2px 8px rgba(6,36,63,0.06);
  --shadow-md: 0 8px 24px rgba(6,36,63,0.08);
  --shadow-lg: 0 18px 48px rgba(6,36,63,0.12);
  --shadow-image: 0 30px 80px -20px rgba(6,36,63,0.30);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-reveal: 800ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   Apply via element selectors so static HTML renders correctly,
   or via .h1 / .body classes for util-style usage.
   ============================================================= */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font-size: var(--fs-16); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

.eyebrow, .kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-48), 6.5vw, var(--fs-96));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}

.h-display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-72), 9vw, var(--fs-128));
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.025em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-32), 4vw, var(--fs-60));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 2.4vw, var(--fs-32));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.lead, p.lead {
  font-size: clamp(var(--fs-18), 1.5vw, var(--fs-24));
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-3);
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-3); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-3); }
.caption { font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--fg-4); letter-spacing: 0.01em; }

a { color: var(--fg-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--brand-green-bright); }

.button-label {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--green-200); color: var(--navy-900); }