/*
 * MTC Cabinet — Design tokens
 *
 * Variables CSS centralisant :
 *  - palette de couleurs (rouge MTC #9B1C1C, or #B7882A, ivoire #FAFAF7)
 *  - typographie (Cormorant Garamond + Inter + Noto Serif SC)
 *  - espacements (échelle 8px)
 *  - rayons, ombres, transitions
 *  - container widths
 *
 * Modifier ces variables suffit à reskinner le thème complet.
 */

:root {
  /* ── Palette principale ─────────────────────────────────── */
  --mtc-red:        #9B1C1C;   /* Rouge MTC — accent principal */
  --mtc-red-dark:   #6E1414;   /* Rouge profond — hover, titres décoratifs */
  --mtc-red-soft:   #FCE9E9;   /* Wash de rouge pour fonds doux */
  --mtc-gold:       #B7882A;   /* Or — accents secondaires, séparateurs */
  --mtc-gold-soft:  #DBC07F;   /* Or pâle — décor, bordures discrètes */
  --mtc-ivory:      #FAFAF7;   /* Ivoire — fond principal */
  --mtc-paper:      #F5F1EA;   /* Papier — sections alternées */
  --mtc-cream:      #FBF7EF;   /* Crème — cartes, blocs */

  /* ── Encres ─────────────────────────────────────────────── */
  --mtc-ink:        #2A2520;   /* Texte principal */
  --mtc-ink-soft:   #4D4842;   /* Texte secondaire */
  --mtc-ink-mute:   #6B6862;   /* Métadonnées, légendes */
  --mtc-ink-faint:  #9C9892;   /* Texte très atténué */

  /* ── Lignes / séparateurs ───────────────────────────────── */
  --mtc-line:       #E8E4DD;   /* Bordures discrètes */
  --mtc-line-soft:  #F0EBE3;   /* Bordures très douces */
  --mtc-line-strong: #C9C2B5;  /* Bordures appuyées */

  /* ── Sémantique ─────────────────────────────────────────── */
  --mtc-zh:         #5B2222;   /* Couleur dédiée aux caractères chinois */
  --mtc-success:    #4A7C1F;
  --mtc-warning:    #D97706;
  --mtc-danger:     #B91C1C;

  /* ── Typographies ───────────────────────────────────────── */
  --font-serif:     'Cormorant Garamond', 'Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-zh:        'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --font-mono:      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* ── Échelle de tailles (mobile-first, scale up à breakpoints) ── */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  1.875rem;  /* 30px */
  --fs-3xl:  2.25rem;   /* 36px */
  --fs-4xl:  3rem;      /* 48px */
  --fs-5xl:  3.75rem;   /* 60px */
  --fs-6xl:  4.5rem;    /* 72px */

  /* ── Espacements (échelle 8px) ──────────────────────────── */
  --sp-1:  0.25rem;     /* 4 */
  --sp-2:  0.5rem;      /* 8 */
  --sp-3:  0.75rem;     /* 12 */
  --sp-4:  1rem;        /* 16 */
  --sp-5:  1.5rem;      /* 24 */
  --sp-6:  2rem;        /* 32 */
  --sp-7:  3rem;        /* 48 */
  --sp-8:  4rem;        /* 64 */
  --sp-9:  6rem;        /* 96 */
  --sp-10: 8rem;        /* 128 */

  /* ── Lineheights ────────────────────────────────────────── */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.9;

  /* ── Rayons ─────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ── Ombres (très légères, presque imperceptibles) ──────── */
  --shadow-xs: 0 1px 2px rgba(42, 37, 32, 0.04);
  --shadow-sm: 0 2px 4px rgba(42, 37, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(42, 37, 32, 0.08);
  --shadow-lg: 0 12px 32px rgba(42, 37, 32, 0.12);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.25s ease-out;
  --transition-slow: 0.4s ease-out;

  /* ── Containers ─────────────────────────────────────────── */
  --container-narrow:  720px;
  --container-default: 1160px;
  --container-wide:    1400px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);

  /* ── Sticky header height (utilisé par scroll-padding) ── */
  --header-height: 80px;
}

/* ── Scroll smooth + respect du sticky header ──────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}