/* Visible — Design tokens
 * Violet pastel principal, or doux pour Vizz, off-white chaleureux.
 * Inspirations: Alan + Headspace (warmth) × Linear + Stripe (rigueur).
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ── Couleurs primaires ─────────────────────────────── */
  --violet-50:  #F5F1FF;
  --violet-100: #ECE4FF;
  --violet-200: #D8C9FF;
  --violet-300: #BFA8FB;
  --violet-400: #A78BFA;   /* PRIMARY — la main ouverte */
  --violet-500: #8B6CF0;
  --violet-600: #6D49E8;
  --violet-700: #5634C7;
  --violet-800: #3F2497;
  --violet-900: #2A1865;
  --violet-ink: #1A1228;

  /* ── Or doux — Vizz, cagnotte, highlights ───────────── */
  --gold-50:  #FFF8E8;
  --gold-100: #FCEFC8;
  --gold-200: #F7DD96;
  --gold-300: #EFC85F;
  --gold-400: #EAB658;   /* ACCENT — Vizz */
  --gold-500: #D29A3C;
  --gold-600: #A8782B;
  --gold-ink: #4A3208;

  /* ── Off-white chaleureux ───────────────────────────── */
  --paper:     #FAF9F6;
  --paper-2:   #F5F3EE;
  --paper-3:   #EFEBE3;

  /* ── Encre — warm near-black with violet undertone ──── */
  --ink:       #1A1625;
  --ink-2:     #3D3650;
  --ink-3:     #6B6577;
  --ink-4:     #9C97A8;
  --ink-5:     #C7C3D1;

  /* ── Surfaces ───────────────────────────────────────── */
  --surface:        #FFFFFF;
  --surface-tint:   #FBF9FF;     /* violet hint */
  --surface-warm:   #FFFAF1;     /* gold hint */
  --border:         #ECE9F2;
  --border-strong:  #D9D4E2;
  --border-dashed:  #E5E0EE;

  /* ── États ─────────────────────────────────────────── */
  --success:    #5BB67F;
  --success-bg: #E6F4EC;
  --warning:    #E89C5C;
  --warning-bg: #FAEDDC;
  --error:      #D96B6B;
  --error-bg:   #F8E2E2;
  --info:       #6BA0D9;
  --info-bg:    #E2EEF8;

  /* ── Émotions (tags Q1 — chacune sa nuance) ────────── */
  --emo-souriant:    #F5C26B;
  --emo-patient:     #8FB7E5;
  --emo-ecoute:      #B49EE8;
  --emo-efficace:    #6FBE9F;
  --emo-bienveillant:#E89AA8;
  --emo-competent:   #7D9AC2;
  --emo-drole:       #F08B6B;
  --emo-attentionne: #C8A3DB;

  /* ── Typo ───────────────────────────────────────────── */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-ui:      'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', Menlo, monospace;

  /* Échelle typo (mobile-first) */
  --t-display-xl: 64px;
  --t-display-lg: 48px;
  --t-display-md: 36px;
  --t-display-sm: 28px;
  --t-title-lg:   24px;
  --t-title-md:   20px;
  --t-title-sm:   18px;
  --t-body-lg:    17px;
  --t-body:       15px;
  --t-body-sm:    13px;
  --t-caption:    12px;
  --t-micro:      11px;

  /* ── Espacement (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;

  /* ── Border radius ──────────────────────────────────── */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-6: 24px;
  --r-7: 28px;
  --r-full: 9999px;

  /* ── Élévation — ombres douces violet-teintées ──────── */
  --shadow-0: 0 1px 2px rgba(26, 18, 40, 0.04);
  --shadow-1: 0 1px 3px rgba(26, 18, 40, 0.06), 0 1px 2px rgba(26, 18, 40, 0.04);
  --shadow-2: 0 4px 12px rgba(26, 18, 40, 0.06), 0 2px 4px rgba(26, 18, 40, 0.04);
  --shadow-3: 0 12px 32px rgba(26, 18, 40, 0.08), 0 4px 8px rgba(26, 18, 40, 0.04);
  --shadow-4: 0 24px 64px rgba(26, 18, 40, 0.12), 0 8px 16px rgba(26, 18, 40, 0.06);
  --shadow-violet: 0 12px 32px rgba(139, 108, 240, 0.20), 0 4px 8px rgba(139, 108, 240, 0.10);
  --shadow-gold: 0 8px 24px rgba(234, 182, 88, 0.30), 0 2px 6px rgba(234, 182, 88, 0.15);

  /* ── Motion ─────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-snap:   cubic-bezier(0.2, 0.9, 0.3, 1.4);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
  --dur-5: 800ms;
}

/* ── Reset très léger pour les artboards Visible ──────── */
.v {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
}
.v *, .v *::before, .v *::after { box-sizing: border-box; }
.v button { font-family: inherit; }
.v .display { font-family: var(--font-display); letter-spacing: -0.015em; }
.v .mono { font-family: var(--font-mono); }