/* =========================================================================
   Varso Design System — Colors & Type
   =========================================================================
   Black, white, and a single accent orange. That's it. The whole point of
   the system is to leave room for the work itself — the brand should never
   compete with the clients' creative output it carries.
   ========================================================================= */

/* --- Webfonts ---------------------------------------------------------- */
/* Primary: Switzer (Fontshare, free for commercial use).
   Closest free, neutral-grotesk substitute for Neue Haas / Helvetica:
   - very even proportions, slightly tighter than Hanken/Inter
   - single-storey g (matches Helvetica), open apertures
   We load Roman 400, Italic 400, Medium 500, Medium Italic 500 to match
   the original Neue Haas Display weight pairing. */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@400,401,500,501&display=swap");


:root {
  /* ------- Color tokens (raw) ------- */
  --varso-black: #1c1c1c;     /* "Notre noir" — never use pure #000 */
  --varso-white: #f6f4ef;     /* "Notre blanc" — warm paper white, never pure #fff */
  --varso-white-pure: #ffffff;/* only for screens that must hit max contrast */
  --varso-orange: #e94f24;    /* The accent. Used SPARINGLY. */

  /* Neutrals derived from --varso-black at controlled opacities.
     Used for borders, dividers, secondary text. No greys invented. */
  --varso-ink-90: #2c2c2c;
  --varso-ink-70: #525252;
  --varso-ink-50: #8a8a8a;
  --varso-ink-30: #c4c4c4;
  --varso-ink-15: #e2e0db;
  --varso-ink-08: #ecebe6;

  /* ------- Semantic foreground / background ------- */
  --fg:        var(--varso-black);
  --fg-muted:  var(--varso-ink-70);
  --fg-faint:  var(--varso-ink-50);
  --fg-on-dark: var(--varso-white);

  --bg:        var(--varso-white);
  --bg-elev:   var(--varso-white-pure);
  --bg-inverse: var(--varso-black);

  --accent:        var(--varso-orange);
  --accent-ink:    var(--varso-white);    /* text on accent */

  --border:        var(--varso-ink-15);
  --border-strong: var(--varso-black);    /* full-weight hairlines */
  --divider:       var(--varso-ink-15);

  /* ------- Typography stacks -------
     Switzer is the primary. Neue Haas Display is kept in the stack so
     production builds with the licensed face fall through to it cleanly. */
  --font-sans: "Switzer",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ------- Type scale (display-led, like the homepage) ------- */
  --fs-hero:    clamp(56px, 8.5vw, 144px);   /* "Nous aidons les organismes..." */
  --fs-display: clamp(40px, 5.5vw, 88px);    /* big section claims */
  --fs-h1:      clamp(32px, 3.6vw, 56px);    /* page titles */
  --fs-h2:      clamp(24px, 2.4vw, 36px);    /* section titles */
  --fs-h3:      20px;                        /* card titles, project category */
  --fs-eyebrow: 13px;                        /* city labels, ALL CAPS */
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-tiny:    12px;

  /* ------- Line heights ------- */
  --lh-tight:   0.96;   /* headlines — Helvetica wants it almost touching */
  --lh-snug:    1.10;
  --lh-normal:  1.45;   /* body */
  --lh-loose:   1.65;

  /* ------- Tracking ------- */
  --tr-tight:   -0.025em; /* hero headlines */
  --tr-snug:    -0.015em; /* h1/h2 */
  --tr-normal:  -0.005em;
  --tr-wide:    0.08em;   /* eyebrows, ALL-CAPS labels */

  /* ------- Spacing scale (4px 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;
  --s-10: 144px;

  /* ------- Radii. Strict mode — no radii anywhere. -------
     The whole system is square-cornered. Tokens are kept (all = 0)
     so existing code that references them still works. */
  --r-0: 0;
  --r-1: 0;
  --r-2: 0;
  --r-pill: 0;

  /* ------- Borders ------- */
  --bw-hair: 1px;
  --bw-rule: 2px;    /* the staircase rule weight from the logo */

  /* ------- Shadows. Used VERY rarely — Varso is flat. ------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(28,28,28,0.06);
  --shadow-2: 0 8px 24px rgba(28,28,28,0.08);

  /* ------- Motion ------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;     /* hover */
  --dur-2: 240ms;     /* state changes */
  --dur-3: 480ms;     /* page transitions */
}

/* =========================================================================
   Element-level type styles
   ========================================================================= */
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.h-hero, .h-display, h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 400;     /* Regular only. No Medium, no Bold, no italic. */
  color: var(--fg);
  margin: 0;
}

.h-hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 400;
}
.h-display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: var(--tr-normal);
}

p { margin: 0 0 var(--s-4); line-height: var(--lh-normal); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  font-weight: 400;
  color: var(--fg);
}

.small { font-size: var(--fs-small); }
.tiny  { font-size: var(--fs-tiny); }

/* Strict mode: no italic, no bold. Regular is the whole voice.
   <em> and <strong> still work semantically but render as Regular. */
em, .italic { font-style: normal; font-weight: 400; }
strong, b   { font-weight: 400; }

.mono { font-family: var(--font-mono); font-size: var(--fs-small); }

/* Accent color is only for: rules, single keywords, a tiny dot, hover ink. */
.accent { color: var(--accent); }
.on-dark { color: var(--fg-on-dark); }

/* The Varso staircase rule — repeats the logo's stepped V silhouette */
.rule {
  display: block;
  height: var(--bw-rule);
  background: var(--fg);
  border: 0;
}
.rule--accent { background: var(--accent); }