/* ============================================================
   kojite — Colors & Type (design tokens)
   Repris tel quel du design system (colors_and_type.css).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&family=Caveat:wght@400..700&display=swap');

:root {
  /* ---------------- COLOR — raw tokens ---------------- */
  --kj-cream:        oklch(0.96 0.018 85);
  --kj-cream-deep:   oklch(0.93 0.022 82);
  --kj-sumi:         oklch(0.25 0.012 60);
  --kj-sumi-soft:    oklch(0.40 0.014 60);
  --kj-sumi-faint:   oklch(0.58 0.014 60);

  --kj-terracotta:   oklch(0.56 0.12 42);
  --kj-terracotta-d: oklch(0.48 0.13 40);
  --kj-terracotta-l: oklch(0.88 0.05 50);

  --kj-indigo:       oklch(0.42 0.10 255);
  --kj-indigo-d:     oklch(0.34 0.10 255);
  --kj-indigo-l:     oklch(0.85 0.03 250);

  --kj-wood:         oklch(0.47 0.045 65);
  --kj-wood-l:       oklch(0.78 0.035 70);

  --kj-koji:         oklch(0.82 0.11 88);
  --kj-koji-d:       oklch(0.72 0.13 85);
  --kj-koji-l:       oklch(0.94 0.06 90);

  --kj-rust:         oklch(0.50 0.15 30);
  --kj-rust-l:       oklch(0.90 0.04 35);

  --kj-muted:        oklch(0.89 0.012 250);
  --kj-muted-d:      oklch(0.78 0.015 250);

  /* ---------------- COLOR — semantic ---------------- */
  --bg:              var(--kj-cream);
  --bg-elevated:     var(--kj-cream-deep);
  --bg-inverse:      var(--kj-sumi);

  --fg:              var(--kj-sumi);
  --fg-soft:         var(--kj-sumi-soft);
  --fg-faint:        var(--kj-sumi-faint);
  --fg-inverse:      var(--kj-cream);

  --primary:         var(--kj-terracotta);
  --primary-hover:   var(--kj-terracotta-d);
  --primary-fg:      var(--kj-cream);

  --link:            var(--kj-indigo);
  --link-hover:      var(--kj-indigo-d);

  --accent:          var(--kj-koji);
  --accent-deep:     var(--kj-koji-d);

  --secondary:       var(--kj-wood);

  --destructive:     var(--kj-rust);
  --destructive-bg:  var(--kj-rust-l);

  --border:          var(--kj-muted);
  --border-strong:   var(--kj-muted-d);
  --rule-indigo:     var(--kj-indigo);

  /* ---------------- TYPE — families ---------------- */
  --font-display:    "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body:       "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-hand:       "Caveat", "Bradley Hand", cursive;

  --display-axes:    "opsz" 120, "SOFT" 70, "WONK" 0;
  --display-axes-tight: "opsz" 48, "SOFT" 50, "WONK" 0;

  /* ---------------- TYPE — scale ---------------- */
  --t-display:       clamp(2.75rem, 5.5vw, 4.5rem);
  --t-h1:            clamp(2rem,   3.5vw, 2.75rem);
  --t-h2:            1.75rem;
  --t-h3:            1.25rem;
  --t-h4:            1.0625rem;
  --t-body:          1.0625rem;
  --t-body-sm:       0.9375rem;
  --t-caption:       0.8125rem;
  --t-fiche:         0.75rem;

  --lh-display:      1.05;
  --lh-heading:      1.15;
  --lh-body:         1.6;
  --lh-tight:        1.3;

  --tracking-fiche:  0.08em;
  --tracking-hand:   0.005em;

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

  /* ---------------- RADII ---------------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ---------------- SHADOWS ---------------- */
  --shadow-sm:  0 1px 2px oklch(0.25 0.02 60 / 0.06),
                0 1px 1px oklch(0.25 0.02 60 / 0.04);
  --shadow-md:  0 4px 12px oklch(0.25 0.02 60 / 0.08),
                0 1px 3px  oklch(0.25 0.02 60 / 0.05);
  --shadow-lg:  0 16px 36px oklch(0.25 0.02 60 / 0.10),
                0 2px 6px  oklch(0.25 0.02 60 / 0.06);

  --rule-thin:  1px solid oklch(0.42 0.10 255 / 0.35);

  /* ---------------- MOTION ---------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-med:    240ms;
  --dur-slow:   420ms;
}

/* ============================================================
   Base — papier kraft
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambiance figée sur « pale » (le panneau Tweaks n'est pas porté). */
[data-ambiance="pale"] {
  --kj-cream: oklch(0.985 0.005 85);
  --kj-cream-deep: oklch(0.965 0.010 82);
  --kj-muted: oklch(0.92 0.008 250);
}

/* ============================================================
   Semantic type styles
   ============================================================ */
.kj-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: 360;
  font-variation-settings: var(--display-axes);
  letter-spacing: -0.015em;
  color: var(--fg);
  text-wrap: pretty;
}

h1, .kj-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  font-weight: 400;
  font-variation-settings: var(--display-axes-tight);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}

h2, .kj-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  font-weight: 440;
  font-variation-settings: "opsz" 36, "SOFT" 30, "WONK" 0;
  letter-spacing: -0.005em;
  color: var(--fg);
}

h3, .kj-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  font-weight: 500;
  color: var(--fg);
}

h4, .kj-h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--fg);
}

p, .kj-p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.kj-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 360;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--fg-soft);
}

a, .kj-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: oklch(0.42 0.10 255 / 0.45);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover, .kj-link:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

small, .kj-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--fg-soft);
}

.kj-fiche {
  font-family: var(--font-body);
  font-size: var(--t-fiche);
  letter-spacing: var(--tracking-fiche);
  text-transform: uppercase;
  color: var(--rule-indigo);
  font-weight: 600;
  line-height: 1.4;
}

.kj-hand {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: var(--tracking-hand);
  color: var(--fg-soft);
}

code, .kj-mono {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
  font-size: 0.9em;
  background: oklch(0.93 0.022 82);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  color: var(--kj-indigo-d);
}

mark, .kj-mark {
  background: linear-gradient(180deg,
              transparent 55%,
              var(--kj-koji) 55%,
              var(--kj-koji) 92%,
              transparent 92%);
  color: inherit;
  padding: 0 0.1em;
}

hr, .kj-rule {
  border: 0;
  border-top: var(--rule-thin);
  margin: var(--sp-6) 0;
}