/* TrésorsMalins v2.0 — Design tokens
   Système de design éditorial pour fiches pédagogiques 3–7 ans
   ------------------------------------------------------------ */

@import url('./fonts/fonts.css');

:root {
  /* ---------- PALETTE ---------- */
  /* Fondations */
  --tm-ivoire:      #FFF8EC;   /* fond principal — 70% */
  --tm-brun:        #352E2A;   /* texte principal */
  --tm-beige-sable: #EADBC8;   /* neutre chaud, séparateurs doux */

  /* Signature */
  --tm-terracotta:  #D97855;   /* accent signature — Malino */
  --tm-jaune-miel:  #E9B84A;   /* constante filet + footer — 10% */

  /* Couleurs collections (20%) */
  --tm-vert-sauge:  #93AA86;
  --tm-bleu-brume:  #91B6C5;
  --tm-prune-douce: #9A7185;

  /* Variantes fonctionnelles */
  --tm-brun-70:     rgba(53, 46, 42, 0.70);
  --tm-brun-50:     rgba(53, 46, 42, 0.50);
  --tm-brun-25:     rgba(53, 46, 42, 0.25);
  --tm-ivoire-warm: #FBF0DC;   /* ivoire un ton en-dessous */
  --tm-blanc-pur:   #FFFFFF;   /* bulles dialogue uniquement */

  /* Bordures collection à 35% opacité (vignettes) */
  --tm-terracotta-35:  rgba(217, 120, 85, 0.35);
  --tm-vert-sauge-35:  rgba(147, 170, 134, 0.35);
  --tm-bleu-brume-35:  rgba(145, 182, 197, 0.35);
  --tm-prune-douce-35: rgba(154, 113, 133, 0.35);
  --tm-jaune-miel-35:  rgba(233, 184, 74, 0.35);

  /* Couleur collection courante (override par .collection-X) */
  --tm-collection:     var(--tm-terracotta);
  --tm-collection-35:  var(--tm-terracotta-35);

  /* ---------- TYPOGRAPHIE ---------- */
  --tm-serif: 'Fraunces', 'Georgia', serif;
  --tm-sans:  'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* Échelle titres (fiches A4 destinées à impression + écran) */
  --tm-fs-display:  clamp(2.75rem, 4.5vw, 4rem);      /* titre fiche */
  --tm-fs-h1:       clamp(2rem, 3.2vw, 2.75rem);
  --tm-fs-h2:       clamp(1.5rem, 2.4vw, 1.875rem);
  --tm-fs-h3:       1.25rem;
  --tm-fs-body:     1.0625rem;   /* 17px — lisibilité enfant */
  --tm-fs-body-sm:  0.9375rem;
  --tm-fs-caption:  0.75rem;     /* Nunito Regular MAJUSCULES */

  --tm-lh-tight:   1.1;
  --tm-lh-snug:    1.25;
  --tm-lh-body:    1.55;

  --tm-tracking-caption: 0.14em;

  /* ---------- ESPACEMENT ---------- */
  --tm-space-1: 4px;
  --tm-space-2: 8px;
  --tm-space-3: 12px;
  --tm-space-4: 16px;
  --tm-space-5: 24px;
  --tm-space-6: 32px;
  --tm-space-7: 48px;
  --tm-space-8: 64px;

  /* ---------- RAYONS ---------- */
  --tm-radius-sm:   8px;
  --tm-radius-md:   14px;
  --tm-radius-lg:   20px;    /* vignettes personnage */
  --tm-radius-xl:   28px;
  --tm-radius-pill: 999px;

  /* ---------- BORDURES ---------- */
  --tm-border-thin:  1px;
  --tm-border:       2px;    /* vignettes, bulles */
  --tm-filet:        3px;    /* filet jaune miel */

  /* ---------- OMBRES (jamais fortes) ---------- */
  --tm-shadow-soft:   0 2px 8px rgba(53, 46, 42, 0.06);
  --tm-shadow-card:   0 4px 14px rgba(53, 46, 42, 0.08);

  /* ---------- MOTIF LOSANGES (header) ---------- */
  --tm-losanges: 
    repeating-linear-gradient(
      45deg,
      transparent 0 22px,
      rgba(255, 248, 236, 0.15) 22px 23px,
      transparent 23px 44px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0 22px,
      rgba(255, 248, 236, 0.15) 22px 23px,
      transparent 23px 44px
    );

  /* Lignes de traçage (pointillés) */
  --tm-trace: rgba(53, 46, 42, 0.22);
}

/* ---------- COLLECTIONS (override) ---------- */
.collection-terracotta { --tm-collection: var(--tm-terracotta);  --tm-collection-35: var(--tm-terracotta-35); }
.collection-sauge      { --tm-collection: var(--tm-vert-sauge);  --tm-collection-35: var(--tm-vert-sauge-35); }
.collection-brume      { --tm-collection: var(--tm-bleu-brume);  --tm-collection-35: var(--tm-bleu-brume-35); }
.collection-prune      { --tm-collection: var(--tm-prune-douce); --tm-collection-35: var(--tm-prune-douce-35); }
.collection-miel       { --tm-collection: var(--tm-jaune-miel);  --tm-collection-35: var(--tm-jaune-miel-35); }

/* ---------- STYLES SÉMANTIQUES ---------- */
.tm-body,
body.tm {
  font-family: var(--tm-sans);
  font-weight: 600;
  font-size: var(--tm-fs-body);
  line-height: var(--tm-lh-body);
  color: var(--tm-brun);
  background: var(--tm-ivoire);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.tm-display {
  font-family: var(--tm-serif);
  font-weight: 800;
  font-size: var(--tm-fs-display);
  line-height: var(--tm-lh-tight);
  color: var(--tm-brun);
  letter-spacing: -0.01em;
}

.tm-h1 { font-family: var(--tm-serif); font-weight: 800; font-size: var(--tm-fs-h1); line-height: var(--tm-lh-tight); color: var(--tm-brun); letter-spacing: -0.01em; }
.tm-h2 { font-family: var(--tm-serif); font-weight: 800; font-size: var(--tm-fs-h2); line-height: var(--tm-lh-snug); color: var(--tm-brun); }
.tm-h3 { font-family: var(--tm-serif); font-weight: 700; font-size: var(--tm-fs-h3); line-height: var(--tm-lh-snug); color: var(--tm-brun); }

.tm-p  { font-family: var(--tm-sans); font-weight: 600; font-size: var(--tm-fs-body); line-height: var(--tm-lh-body); color: var(--tm-brun); }

.tm-caption {
  font-family: var(--tm-sans);
  font-weight: 400;
  font-size: var(--tm-fs-caption);
  line-height: 1.4;
  color: var(--tm-brun-70);
  text-transform: uppercase;
  letter-spacing: var(--tm-tracking-caption);
}

/* ---------- COMPOSANTS SIGNATURES ---------- */

/* Filet séparateur jaune miel — constante universelle */
.tm-filet {
  height: var(--tm-filet);
  background: var(--tm-jaune-miel);
  border: 0;
  width: 100%;
}

/* Header bandeau couleur collection + motif losanges */
.tm-header {
  background-color: var(--tm-collection);
  background-image: var(--tm-losanges);
  color: var(--tm-ivoire);
  padding: var(--tm-space-5) var(--tm-space-6);
  position: relative;
}

/* Footer bandeau jaune miel constant */
.tm-footer {
  background: var(--tm-jaune-miel);
  color: var(--tm-brun);
  padding: var(--tm-space-4) var(--tm-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space-4);
}

.tm-footer-rewards {
  display: flex;
  gap: var(--tm-space-3);
}
.tm-reward {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--tm-brun);
  background: transparent;
  transition: background 160ms ease;
}
.tm-reward.is-filled { background: var(--tm-brun); }

/* Vignette personnage : radius 20 + border 2px couleur collection 35% */
.tm-vignette {
  border-radius: var(--tm-radius-lg);
  border: var(--tm-border) solid var(--tm-collection-35);
  background: var(--tm-ivoire-warm);
  overflow: hidden;
}

/* Bulle dialogue */
.tm-bubble {
  background: var(--tm-blanc-pur);
  border: var(--tm-border) solid var(--tm-collection);
  border-radius: var(--tm-radius-lg);
  padding: var(--tm-space-4) var(--tm-space-5);
  color: var(--tm-brun);
  position: relative;
  font-family: var(--tm-sans);
  font-weight: 600;
}

/* Boutons */
.tm-btn {
  font-family: var(--tm-sans);
  font-weight: 700;
  font-size: var(--tm-fs-body-sm);
  padding: 12px 22px;
  border-radius: var(--tm-radius-pill);
  border: 2px solid var(--tm-brun);
  background: var(--tm-brun);
  color: var(--tm-ivoire);
  cursor: pointer;
  transition: transform 120ms ease, background 160ms ease;
}
.tm-btn:hover  { background: #1f1a17; }
.tm-btn:active { transform: scale(0.97); }

.tm-btn.tm-btn-collection {
  background: var(--tm-collection);
  border-color: var(--tm-collection);
  color: var(--tm-ivoire);
}
.tm-btn.tm-btn-ghost {
  background: transparent;
  color: var(--tm-brun);
}