/* ============================================================
   PrismUp Design System — Colors & Type
   ============================================================
   Brand: executive coaching + leadership / GenZ management
   Founder: Olivier Friedman
   Sites: prismup.fr  |  friedman.fr (GenZ conference landing)
   ============================================================ */

/* Webfonts (Google Fonts substitute — see README "Font substitutions") */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- Brand core ---------- */
  --pu-navy:        #172154;   /* "Prism" word + triangle outer — sampled from logo */
  --pu-navy-deep:   #0E163C;   /* darker shade for hover / pressed */
  --pu-navy-soft:   #2A356E;   /* lifted variant for chips, secondary fills */
  --pu-blue:        #3E84C2;   /* "Up" word + inner triangle */
  --pu-blue-light:  #6FA6D6;
  --pu-blue-bright: #2C6FB0;   /* hover for blue */
  --pu-cream:       #F5F1EA;   /* warm paper background used in marketing photos */
  --pu-paper:       #FAF8F4;   /* lighter cream for surfaces */

  /* ---------- Neutrals ---------- */
  --pu-ink:         #0B0F22;   /* highest-contrast type */
  --pu-fg-1:        #172154;   /* default heading color = navy */
  --pu-fg-2:        #3D4566;   /* body text */
  --pu-fg-3:        #6B7290;   /* muted, captions */
  --pu-fg-4:        #9CA1B8;   /* placeholder / disabled */
  --pu-line:        #E4E2DC;   /* hairline on cream */
  --pu-line-2:      #D8D5CD;   /* slightly stronger hairline */
  --pu-bg:          #FFFFFF;
  --pu-bg-subtle:   #F5F1EA;   /* same as cream — primary marketing bg */
  --pu-bg-dark:     #0E163C;   /* hero / footer dark variant */

  /* ---------- Semantic ---------- */
  --pu-success:     #2F8F6B;
  --pu-warn:        #C77A2B;
  --pu-danger:      #B6443B;
  --pu-info:        var(--pu-blue);

  /* ---------- Typography stacks ---------- */
  --pu-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --pu-font-body:    "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --pu-font-accent:  "Instrument Serif", "Georgia", serif;       /* for italic editorial flourishes */
  --pu-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (display-first, slightly oversized) ---------- */
  --pu-text-xs:   12px;
  --pu-text-sm:   14px;
  --pu-text-base: 16px;
  --pu-text-md:   18px;
  --pu-text-lg:   22px;
  --pu-text-xl:   28px;
  --pu-text-2xl:  36px;
  --pu-text-3xl:  48px;
  --pu-text-4xl:  64px;
  --pu-text-5xl:  88px;       /* hero. used for "Nous révélons" */
  --pu-text-6xl:  120px;      /* extreme display, conference page */

  /* ---------- Weight ---------- */
  --pu-w-regular: 400;
  --pu-w-medium:  500;
  --pu-w-semi:    600;
  --pu-w-bold:    700;
  --pu-w-black:   800;

  /* ---------- Line height ---------- */
  --pu-lh-tight:  0.95;
  --pu-lh-snug:   1.1;
  --pu-lh-normal: 1.4;
  --pu-lh-loose:  1.65;

  /* ---------- Tracking ---------- */
  --pu-tr-tight:  -0.03em;     /* huge display */
  --pu-tr-snug:   -0.015em;    /* H2 / H3 */
  --pu-tr-wide:   0.14em;      /* eyebrows, all-caps labels */

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

  /* ---------- Radius ---------- */
  --pu-r-xs:  4px;
  --pu-r-sm:  8px;
  --pu-r-md:  14px;
  --pu-r-lg:  22px;
  --pu-r-xl:  32px;
  --pu-r-pill: 999px;

  /* ---------- Shadows (soft, paper-like) ---------- */
  --pu-shadow-1: 0 1px 2px rgba(14,22,60,0.05), 0 1px 1px rgba(14,22,60,0.04);
  --pu-shadow-2: 0 6px 18px -8px rgba(14,22,60,0.18), 0 2px 6px -2px rgba(14,22,60,0.08);
  --pu-shadow-3: 0 24px 60px -24px rgba(14,22,60,0.30), 0 8px 16px -8px rgba(14,22,60,0.10);
  --pu-shadow-glow: 0 0 0 6px rgba(62,132,194,0.18);

  /* ---------- Motion ---------- */
  --pu-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --pu-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --pu-dur-fast:    160ms;
  --pu-dur-base:    260ms;
  --pu-dur-slow:    520ms;
}

/* ===========================================================
   Semantic element styles — drop-in resets for marketing pages
   =========================================================== */

html, body {
  background: var(--pu-bg-subtle);
  color: var(--pu-fg-2);
  font-family: var(--pu-font-body);
  font-size: var(--pu-text-base);
  line-height: var(--pu-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pu-font-display);
  color: var(--pu-fg-1);
  font-weight: var(--pu-w-bold);
  letter-spacing: var(--pu-tr-tight);
  line-height: var(--pu-lh-snug);
  text-wrap: balance;
}

h1 { font-size: var(--pu-text-5xl); line-height: var(--pu-lh-tight); }
h2 { font-size: var(--pu-text-3xl); }
h3 { font-size: var(--pu-text-2xl); letter-spacing: var(--pu-tr-snug); }
h4 { font-size: var(--pu-text-xl);  letter-spacing: var(--pu-tr-snug); }
h5 { font-size: var(--pu-text-lg);  font-weight: var(--pu-w-semi); }
h6 { font-size: var(--pu-text-md);  font-weight: var(--pu-w-semi); }

p { font-size: var(--pu-text-md); line-height: var(--pu-lh-loose); color: var(--pu-fg-2); text-wrap: pretty; }
small { font-size: var(--pu-text-sm); color: var(--pu-fg-3); }
em.accent { font-family: var(--pu-font-accent); font-style: italic; color: var(--pu-navy); }

.eyebrow {
  font-family: var(--pu-font-body);
  font-size: var(--pu-text-xs);
  font-weight: var(--pu-w-medium);
  letter-spacing: var(--pu-tr-wide);
  text-transform: uppercase;
  color: var(--pu-fg-3);
}

a { color: var(--pu-navy); text-decoration: none; transition: color var(--pu-dur-fast) var(--pu-ease); }
a:hover { color: var(--pu-blue); }

::selection { background: var(--pu-navy); color: var(--pu-cream); }