/* KISS Design System — Tokens
 * "Keep It Simple & Smart"
 * Single source of truth: colors, type, spacing, radii, shadows, motion.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── BRAND COLORS ──────────────────────────────────────────── */
  --kiss-red:        #C8102E;   /* signature brush-circle red */
  --kiss-red-dark:   #9B0C24;   /* hover/pressed */
  --kiss-red-soft:   #F5DDE1;   /* tinted backgrounds */
  --kiss-ink:        #0E0E10;   /* primary text, K monogram */
  --kiss-ink-soft:   #2B2B2F;
  --kiss-paper:      #FAF8F5;   /* warm off-white, bg */
  --kiss-paper-2:    #F2EEE8;   /* alt bg, cards */

  /* ── NEUTRALS ──────────────────────────────────────────────── */
  --slate-900: #15161A;
  --slate-700: #3D404A;
  --slate-500: #6E7280;
  --slate-300: #B6B9C2;
  --slate-200: #DCDDE2;
  --slate-100: #ECEDF0;
  --slate-50:  #F7F7F8;
  --white:     #FFFFFF;

  /* ── SEMANTIC ──────────────────────────────────────────────── */
  --success: #1F7A4D;
  --warning: #C77B0A;
  --info:    #1E5FA8;
  --danger:  var(--kiss-red);

  /* ── TYPE ──────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Times New Roman', serif;     /* editorial, used sparingly */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — modular, 1.25 ratio, base 16 */
  --fs-12: 0.75rem;   /* 12 — meta, captions, eyebrow */
  --fs-14: 0.875rem;  /* 14 — small body */
  --fs-16: 1rem;      /* 16 — body */
  --fs-18: 1.125rem;  /* 18 — body large */
  --fs-22: 1.375rem;  /* 22 — h5 / lead */
  --fs-28: 1.75rem;   /* 28 — h4 */
  --fs-36: 2.25rem;   /* 36 — h3 */
  --fs-48: 3rem;      /* 48 — h2 */
  --fs-64: 4rem;      /* 64 — h1 */
  --fs-96: 6rem;      /* 96 — display, slide hero */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-eyebrow: 0.18em;

  /* ── SPACING (4px base) ────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ── RADII ─────────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ── SHADOWS ───────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(14,14,16,0.06), 0 1px 1px rgba(14,14,16,0.04);
  --shadow-2: 0 4px 12px rgba(14,14,16,0.08), 0 2px 4px rgba(14,14,16,0.04);
  --shadow-3: 0 12px 32px rgba(14,14,16,0.10), 0 4px 8px rgba(14,14,16,0.05);
  --shadow-4: 0 24px 60px rgba(14,14,16,0.14), 0 8px 16px rgba(14,14,16,0.06);

  /* ── MOTION ────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ── LAYOUT ────────────────────────────────────────────────── */
  --container:    1240px;
  --container-sm: 760px;
  --gutter:       var(--s-6);

  /* ── DECK SLIDE SIZE (16:9) ────────────────────────────────── */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --slide-padding-x: 120px;
  --slide-padding-y: 96px;
}

/* ── BASE RESETS ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--kiss-ink);
  background: var(--kiss-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ── KISS SIGNATURE: THE BRUSH-CIRCLE STAMP ────────────────── */
/* The red ink-brushed circle is THE brand mark. Use it as a stamp:
 * - around important headings ("Le projet", "01.")
 * - as accent behind a number or icon
 * - as a header bullet for section titles
 * Use sparingly — once per slide, once per page section.
 */
.kiss-stamp {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 1.6em;
  height: 1.6em;
  font-weight: 600;
}
.kiss-stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/brush-circle.svg') center/contain no-repeat;
  pointer-events: none;
}