/* tokens.css — Système de design "Les Sept Carpes"
   Inspiré du Japon traditionnel : encre, washi, or vieilli, jade */

:root {
  /* ─── Palette principale ─── */
  --color-ink:        #1a1a14;   /* encre de Chine */
  --color-ink-light:  #2e2e22;   /* encre diluée */
  --color-washi:      #f5f0e8;   /* papier washi ivoire */
  --color-washi-dark: #e8e2d4;   /* washi ombré */
  --color-gold:       #c9a55a;   /* or vieilli */
  --color-gold-light: #e4c98a;   /* or clair */
  --color-gold-pale:  #f2e8cc;   /* or pâle */
  --color-jade:       #4a7c59;   /* mousse de jade */
  --color-jade-light: #7aab87;   /* jade clair */
  --color-sakura:     #e8c4b8;   /* cerise pâle */
  --color-vermeil:    #c84b2f;   /* vermeil / carpe rouge */
  --color-cobalt:     #2a5f8f;   /* cobalt / carpe bleue */
  --color-amber:      #d4813a;   /* ambre / carpe orange */
  --color-silver:     #8c9aaa;   /* argent discret */
  --color-mist:       rgba(245, 240, 232, 0.08); /* voile blanc */

  /* ─── Couleurs des sept carpes ─── */
  --koi-courage:      #c84b2f;   /* rouge-vermeil */
  --koi-elegance:     #c9a55a;   /* or */
  --koi-patience:     #4a7c59;   /* jade */
  --koi-creativite:   #7b5ea7;   /* prune */
  --koi-excellence:   #2a5f8f;   /* cobalt */
  --koi-liberte:      #d4813a;   /* ambre */
  --koi-transmission: #8c6a5a;   /* terre cuite */

  /* ─── Typographie ─── */
  --font-display: 'Noto Serif JP', 'Georgia', serif;
  --font-body:    'Noto Sans JP', 'Helvetica Neue', sans-serif;
  --font-mono:    'SF Mono', 'Monaco', monospace;

  /* ─── Échelle typographique ─── */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */

  /* ─── Espacement ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ─── Rayons ─── */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ─── Ombres ─── */
  --shadow-sm:  0 1px 3px rgba(26, 26, 20, 0.15);
  --shadow-md:  0 4px 16px rgba(26, 26, 20, 0.20);
  --shadow-lg:  0 12px 40px rgba(26, 26, 20, 0.30);
  --shadow-ink: 0 0 0 1px rgba(26, 26, 20, 0.08);

  /* ─── Durées d'animation ─── */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 1200ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-index ─── */
  --z-pond:        0;
  --z-app:        10;
  --z-header:     20;
  --z-progress:   20;
  --z-overlay:    50;
  --z-celebration: 60;
  --z-message:    70;
}