/* ================================================================
   TOKENS — Système de Design · Marque État Congolais
   Source : Charte Graphique du Gouvernement de la RDC, Fév 2022
   ================================================================ */

/* ── Cooper Hewitt Fonts (Local) ── */
@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-ThinItalic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-BookItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-SemiboldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Cooper Hewitt';
  src: url('../font/cooper-hewitt/CooperHewitt-HeavyItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

/* ── Great Vibes Font (Local) ── */
@font-face {
  font-family: 'Great Vibes';
  src: url('../font/Great_Vibes/GreatVibes-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ── Garamond Font (Local) ── */
@font-face {
  font-family: 'EB Garamond';
  src: url('../font/garamond_[allfont.ru].ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ── Reset minimal ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font-complement); color: var(--text-primary); background: var(--bg-app); line-height: 1.6; -webkit-font-smoothing: antialiased; }

:root {

  /* ════════════════════════════════════════════════════════
     COULEURS PRINCIPALES — Tricolore du Drapeau
     ════════════════════════════════════════════════════════ */
  --rdc-bleu:    #0095C9;  /* C:100 M:0 J:0 N:0   · Pantone 801C  · R:0   V:149 B:201 */
  --rdc-jaune:   #FFF24B;  /* C:0 M:0 J:100 N:0    · Pantone 803C  · R:255 V:242 B:75  */
  --rdc-rouge:   #DB3832;  /* C:0 M:100 J:100 N:0   · Pantone 485C  · R:219 V:56  B:50  */

  /* ════════════════════════════════════════════════════════
     COULEURS COMPLÉMENTAIRES — Tier 1 (Faune, Flore, Richesses)
     ════════════════════════════════════════════════════════ */
  --rdc-noir:        #323230;  /* Pantone 447C  · C:100 M:100 J:100 N:0  */
  --rdc-bleu-fonce:  #17418A;  /* Pantone 7687C · C:100 M:80  J:10  N:2  */
  --rdc-bleu-ciel:   #0F89CB;  /* Pantone 2925C · C:80  M:34  J:0   N:0  */
  --rdc-vert:        #65B32E;  /* Pantone 369C  · C:65  M:0   J:100 N:0  */
  --rdc-orange:      #D44816;  /* Pantone 173C  · C:11  M:82  J:100 N:2  */
  --rdc-orange-vif:  #ED7016;  /* Pantone 158C  · C:0   M:66  J:96  N:0  */
  --rdc-sarcelle:    #405D64;  /* Pantone 5477C · C:45  M:0   J:11  N:70 */
  --rdc-pourpre:     #9C0055;  /* Pantone 676C  · C:29  M:100 J:29  N:22 */
  --rdc-or:          #9F6E26;  /* Pantone 7558C · C:45  M:60  J:100 N:0  */

  /* ════════════════════════════════════════════════════════
     COULEURS COMPLÉMENTAIRES — Tier 2
     ════════════════════════════════════════════════════════ */
  --rdc-brun:        #6B5854;  /* Pantone 411C  */
  --rdc-indigo:      #3E4D9C;  /* Pantone 7455C */
  --rdc-petrole:     #115780;  /* Pantone 7700C */
  --rdc-olive:       #89A331;  /* Pantone 377C  */
  --rdc-peche:       #E58858;  /* Pantone 7576C */
  --rdc-cuivre:      #A14E17;  /* Pantone 160C  */
  --rdc-ardoise:     #193540;  /* Pantone 7546C */
  --rdc-magenta:     #A14E17;  /* Pantone 219C  */
  --rdc-beige:       #CBAC7E;  /* Pantone 466C  */

  /* ════════════════════════════════════════════════════════
     COULEURS COMPLÉMENTAIRES — Tier 3
     ════════════════════════════════════════════════════════ */
  --rdc-gris-clair:  #AFB8BE;  /* Pantone 877C (Argent) */
  --rdc-mauve:       #6B5854;  /* Pantone 7670C */
  --rdc-emeraude:    #1A806C;  /* Pantone 568C  */
  --rdc-or-fonce:    #BD9A00;  /* Pantone 871C (Or)     */
  --rdc-creme:       #F9E3D5;  /* Pantone 7604C */
  --rdc-acajou:      #63230B;  /* Pantone 168C  */
  --rdc-gris-bleu:   #899EAA;  /* Pantone 7543C */
  --rdc-grenat:      #63230B;  /* Pantone 203C  */
  --rdc-brun-fonce:  #80602C;  /* Pantone 7560C */

  /* ════════════════════════════════════════════════════════
     BLEU INSTITUTIONNEL (Chemise bleue du Gouvernement)
     ════════════════════════════════════════════════════════ */
  --rdc-bleu-inst:   #174899;  /* C:9 M:76 J:0 N:0 · R:23 V:72 B:153 */

  /* ════════════════════════════════════════════════════════
     COULEURS SÉMANTIQUES
     ════════════════════════════════════════════════════════ */
  --color-success:   #65B32E;  /* Vert RDC         */
  --color-warning:   #ED7016;  /* Orange vif RDC   */
  --color-danger:    #DB3832;  /* Rouge RDC        */
  --color-info:      #0095C9;  /* Bleu RDC         */

  /* ════════════════════════════════════════════════════════
     SURFACES & FONDS
     ════════════════════════════════════════════════════════ */
  --bg-app:          #F8FAFC;
  --bg-white:        #FFFFFF;
  --bg-glass:        rgba(255,255,255,0.70);
  --bg-dark:         #111827;
  --border-soft:     rgba(0,0,0,0.06);
  --border-medium:   rgba(0,0,0,0.12);
  --border-glass:    rgba(255,255,255,0.40);

  /* ════════════════════════════════════════════════════════
     TEXTES
     ════════════════════════════════════════════════════════ */
  --text-primary:    #111827;
  --text-secondary:  #4B5563;
  --text-muted:      #9CA3AF;
  --text-inverse:    #FFFFFF;

  /* ════════════════════════════════════════════════════════
     TOKENS THÈME (défaut = bleu RDC)
     ════════════════════════════════════════════════════════ */
  --primary:         #0095C9;
  --primary-dark:    #17418A;
  --primary-light:   rgba(0,149,201,0.08);
  --primary-border:  rgba(0,149,201,0.20);
  --primary-glow:    rgba(0,149,201,0.25);

  /* ════════════════════════════════════════════════════════
     TYPOGRAPHIE — Charte Graphique RDC
     ════════════════════════════════════════════════════════ */
  --font-principale: 'Cooper Hewitt', 'Inter', system-ui, sans-serif;
  --font-complement: 'EB Garamond', 'Garamond', 'Georgia', serif;
  --font-autorite:   'Great Vibes', 'Allura', cursive;
  --font-ui:         'Cooper Hewitt', 'Inter', system-ui, sans-serif;

  /* ── Échelle typographique ── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* ════════════════════════════════════════════════════════
     ESPACEMENT — Base 4px
     ════════════════════════════════════════════════════════ */
  --space-0:   0;
  --space-1:   0.25rem;   /*  4px  */
  --space-2:   0.5rem;    /*  8px  */
  --space-3:   0.75rem;   /* 12px  */
  --space-4:   1rem;      /* 16px  */
  --space-5:   1.25rem;   /* 20px  */
  --space-6:   1.5rem;    /* 24px  */
  --space-8:   2rem;      /* 32px  */
  --space-10:  2.5rem;    /* 40px  */
  --space-12:  3rem;      /* 48px  */
  --space-16:  4rem;      /* 64px  */
  --space-20:  5rem;      /* 80px  */
  --space-24:  6rem;      /* 96px  */
  --space-32:  8rem;      /* 128px */

  /* ── Mesures spécifiques Charte ── */
  --ligne-etat-width:  4px;
  --ligne-etat-min-h:  53px;      /* Taille minimale digitale          */
  --zone-securite:     16px;      /* 4 × largeur Ligne d'État          */
  --logo-web:          50px;      /* Logo dans header web               */
  --logo-social:       110px;     /* Logo réseaux sociaux / vidéo       */
  --header-h:          108px;     /* Hauteur barre header/footer        */
  --header-w:          1920px;    /* Largeur standard web               */
  --content-zone:      438px;     /* Zone de contenu                    */
  --module:            110px;     /* Espacement modulaire               */
  --section-width:     220px;     /* Largeur section                    */
  --subtitle-bar-h:    269px;     /* Hauteur barre sous-titre           */

  /* ════════════════════════════════════════════════════════
     OMBRES & ÉLÉVATIONS
     ════════════════════════════════════════════════════════ */
  --shadow-none:  none;
  --shadow-soft:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.16);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);

  --elevation-0: var(--shadow-none);
  --elevation-1: var(--shadow-soft);
  --elevation-2: var(--shadow-md);
  --elevation-3: var(--shadow-lg);
  --elevation-4: var(--shadow-xl);

  /* ════════════════════════════════════════════════════════
     RAYONS DE BORDURE
     ════════════════════════════════════════════════════════ */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ════════════════════════════════════════════════════════
     Z-INDEX
     ════════════════════════════════════════════════════════ */
  --z-base:      0;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-modal:     30;
  --z-toast:     40;
  --z-tooltip:   50;

  /* ════════════════════════════════════════════════════════
     TRANSITIONS
     ════════════════════════════════════════════════════════ */
  --transition-fast:    150ms ease;
  --transition-normal:  200ms ease;
  --transition-slow:    300ms ease;

  /* ════════════════════════════════════════════════════════
     SIDEBAR
     ════════════════════════════════════════════════════════ */
  --sidebar-width:      280px;
  --sidebar-collapsed:  72px;
}