/**
 * design-tokens/tokens.css
 * Variables CSS globales — RecruitQuizz / CABM
 * À importer dans resources/css/app.css :
 *   @import '../../../design-tokens/tokens.css';
 */

/* ─── COULEURS ────────────────────────────────────────────────────────────── */
:root {
  /* Primaires */
  --color-primary:        #1a4b8c;
  --color-primary-dark:   #122f5a;
  --color-primary-light:  #3a7abf;
  --color-primary-soft:   rgba(26, 75, 140, 0.08);

  /* Accent */
  --color-accent:         #c8102e;
  --color-accent-soft:    rgba(200, 16, 46, 0.10);

  /* Or (highlight) */
  --color-gold:           #f5a800;
  --color-gold-soft:      rgba(245, 168, 0, 0.12);
  --color-gold-on:        #3a2800;   /* texte sur fond or */

  /* Neutres warm */
  --color-bg:             #f0ece4;   /* fond global */
  --color-surface:        #faf9f7;   /* cartes */
  --color-sand:           #e8e0d0;   /* sable */
  --color-border:         rgba(45, 45, 45, 0.07);

  /* Texte */
  --color-text:           #2d2d2d;
  --color-text-muted:     rgba(45, 45, 45, 0.50);
  --color-text-faint:     rgba(45, 45, 45, 0.28);

  /* Sémantiques */
  --color-success:        #10b981;
  --color-success-soft:   rgba(16, 185, 129, 0.10);
  --color-warning:        #f5a800;
  --color-danger:         #c8102e;
  --color-info:           #3a7abf;

  /* Sidebar */
  --sidebar-bg:           #1a4b8c;
  --sidebar-text:         rgba(255, 255, 255, 0.72);
  --sidebar-active-bg:    #f5a800;
  --sidebar-active-text:  #3a2800;
  --sidebar-border:       rgba(255, 255, 255, 0.07);
  --sidebar-width:        220px;
  --sidebar-width-sm:     64px;

  /* Layout */
  --header-height:        60px;
  --navbar-height:        40px;
}

/* ─── DARK MODE ───────────────────────────────────────────────────────────── */
.dark {
  --color-primary:        #4a8fd4;
  --color-primary-soft:   rgba(74, 143, 212, 0.12);

  --color-bg:             #0f1923;
  --color-surface:        #162130;
  --color-border:         rgba(255, 255, 255, 0.06);

  --color-text:           #e8e8e8;
  --color-text-muted:     rgba(232, 232, 232, 0.50);
  --color-text-faint:     rgba(232, 232, 232, 0.25);

  --color-success:        #34d399;
  --color-success-soft:   rgba(16, 185, 129, 0.12);
  --color-accent:         #ff4d6a;

  --sidebar-bg:           #0a111a;
  --sidebar-border:       rgba(255, 255, 255, 0.05);
}

/* ─── TYPOGRAPHIE ─────────────────────────────────────────────────────────── */
:root {
  --font-sans:     'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:    'Merriweather', Georgia, serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Échelle */
  --text-2xs:  0.625rem;   /* 10px — labels uppercase */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.125rem;   /* 18px */
  --text-2xl:  1.25rem;    /* 20px */
  --text-3xl:  1.5rem;     /* 24px */
  --text-4xl:  2rem;       /* 32px */
}

/* ─── ESPACEMENT ──────────────────────────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ─── RAYONS ──────────────────────────────────────────────────────────────── */
:root {
  --radius-sm:    6px;
  --radius:       8px;
  --radius-md:    10px;
  --radius-lg:    12px;
  --radius-xl:    14px;
  --radius-2xl:   16px;
  --radius-3xl:   20px;
  --radius-full:  9999px;
  /* Tokens sémantiques */
  --radius-card:  16px;
  --radius-btn:   10px;
  --radius-badge: 20px;
  --radius-input: 10px;
}

/* ─── OMBRES ──────────────────────────────────────────────────────────────── */
:root {
  --shadow-xs:      0 1px 3px rgba(0,0,0,0.05);
  --shadow-sm:      0 1px 4px rgba(0,0,0,0.07);
  --shadow:         0 2px 8px rgba(0,0,0,0.09);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:      0 8px 28px rgba(0,0,0,0.12);
  --shadow-primary: 0 4px 16px rgba(26,75,140,0.20);
  --shadow-gold:    0 4px 16px rgba(245,168,0,0.30);
  --shadow-accent:  0 4px 16px rgba(200,16,46,0.18);
}

/* ─── TRANSITIONS ─────────────────────────────────────────────────────────── */
:root {
  --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:        180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── COMPOSANTS DE BASE ──────────────────────────────────────────────────── */

/* --- Carte --- */
.rq-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow:    var(--shadow-sm);
}

/* --- Bouton primaire (or) --- */
.rq-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  padding:         10px 20px;
  border:          none;
  border-radius:   var(--radius-btn);
  font-family:     var(--font-sans);
  font-weight:     800;
  font-size:       var(--text-sm);
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  cursor:          pointer;
  transition:      all var(--transition);
}
.rq-btn-primary {
  background:  var(--color-gold);
  color:       var(--color-gold-on);
  box-shadow:  var(--shadow-gold);
}
.rq-btn-primary:hover {
  filter:    brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245,168,0,0.40);
}
.rq-btn-ghost {
  background:   transparent;
  color:        var(--color-text);
  border:       1.5px solid var(--color-border);
}
.rq-btn-ghost:hover {
  background:   var(--color-primary-soft);
  border-color: var(--color-primary);
  color:        var(--color-primary);
}

/* --- Input --- */
.rq-input {
  width:         100%;
  padding:       10px 14px;
  border-radius: var(--radius-input);
  border:        1.5px solid var(--color-border);
  background:    var(--color-surface);
  color:         var(--color-text);
  font-family:   var(--font-sans);
  font-size:     var(--text-base);
  font-weight:   600;
  outline:       none;
  transition:    border-color var(--transition);
}
.rq-input:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-soft);
}

/* --- Badge statut --- */
.rq-badge {
  display:        inline-block;
  padding:        3px 10px;
  border-radius:  var(--radius-badge);
  font-size:      var(--text-2xs);
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.rq-badge--pending  { background: rgba(45,45,45,0.06); color: rgba(45,45,45,0.55); }
.rq-badge--ongoing  { background: rgba(58,122,191,0.10); color: #1a4b8c; }
.rq-badge--done     { background: rgba(16,185,129,0.10); color: #059669; }
.rq-badge--rejected { background: rgba(200,16,46,0.10);  color: #c8102e; }

.dark .rq-badge--pending  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); }
.dark .rq-badge--ongoing  { background: rgba(58,122,191,0.20);  color: #7ab8f5; }
.dark .rq-badge--done     { background: rgba(16,185,129,0.15);  color: #34d399; }
.dark .rq-badge--rejected { background: rgba(255,77,106,0.15);  color: #ff8099; }

/* --- Label section uppercase --- */
.rq-label {
  font-size:      var(--text-2xs);
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color:          var(--color-text-faint);
}

/* --- Score bar --- */
.rq-score-bar {
  height:        5px;
  background:    rgba(45,45,45,0.08);
  border-radius: 99px;
  overflow:      hidden;
}
.rq-score-bar__fill {
  height:        100%;
  border-radius: 99px;
  transition:    width 0.4s ease;
}
.rq-score-bar__fill--high   { background: var(--color-success); }
.rq-score-bar__fill--mid    { background: var(--color-gold); }
.rq-score-bar__fill--low    { background: var(--color-accent); }

/* --- Animations utilitaires --- */
@keyframes rq-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes rq-slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.rq-animate-fade  { animation: rq-fade-in  0.2s ease-out; }
.rq-animate-slide { animation: rq-slide-in 0.2s ease-out; }