/* ==========================================================================
   common.css — Projet Thémis
   Shared design tokens, reset, navigation, buttons, and utilities.
   Included by: index.html · demo/dashboard.html · demo/login.html
   ========================================================================== */


/* ─────────────────────────────────────────
   DESIGN TOKENS
   Single source of truth for the colour palette.
   All per-page styles reference these variables.
───────────────────────────────────────── */
:root {
  /* Brand blues */
  --navy:         #0B1F3A;
  --blue:         #1A4B8C;
  --blue-mid:     #2563B0;
  --accent:       #3B82F6;
  --accent-light: #DBEAFE;

  /* Semantic colours */
  --red:          #DC2626;
  --red-light:    #FEE2E2;
  --orange:       #F97316;
  --orange-light: #FFEDD5;
  --green:        #16A34A;
  --green-light:  #DCFCE7;
  --yellow-mid:   #D97706;

  /* Neutrals */
  --white:        #FFFFFF;
  --off-white:    #F8FAFC;
  --gray-100:     #F1F5F9;
  --gray-300:     #CBD5E1;
  --gray-500:     #64748B;
  --gray-700:     #334155;
  --text:         #0F172A;
}


/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}


/* ─────────────────────────────────────────
   NAVIGATION — shared shell
   Both index.html and dashboard.html use the
   same fixed nav bar. The centred content differs
   (nav-links vs nav-tabs) but the shell is identical.
───────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center;
  padding: 0 5vw; height: 68px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-300);
}

.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem; font-weight: 600;
  color: var(--navy); letter-spacing: -0.02em;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo span { color: var(--accent); }

/* ── Variant A: centred link list (index.html) ── */
.nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2.5rem; list-style: none;
}
.nav-links a {
  font-size: 0.875rem; font-weight: 500;
  color: var(--gray-700); text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover  { color: var(--blue-mid); }
.nav-links a.active { color: var(--blue-mid); font-weight: 600; }

/* ── Variant B: centred tab bar (dashboard.html) ── */
.nav-tabs {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px;
}
.nav-tab {
  padding: 6px 16px; border-radius: 6px;
  font-size: 0.84rem; font-weight: 500; color: var(--gray-500);
  cursor: pointer; border: none; background: transparent;
  transition: background 0.15s, color 0.15s;
}
.nav-tab:hover  { background: var(--gray-100); color: var(--navy); }
.nav-tab.active { background: var(--accent-light); color: var(--blue-mid); }

/* Right-aligned CTA button (index.html) */
.nav-cta {
  margin-left: auto;
  background: var(--navy); color: var(--white);
  padding: 8px 20px; border-radius: 6px;
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--blue-mid); }

/* Hide link list on small screens */
@media (max-width: 900px) { .nav-links { display: none; } }


/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white);
  font-size: 0.9rem; font-weight: 500;
  padding: 13px 28px; border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--blue-mid); transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--navy);
  font-size: 0.9rem; font-weight: 500;
  padding: 13px 28px; border-radius: 8px;
  border: 1.5px solid var(--gray-300);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn-secondary:hover { border-color: var(--blue-mid); color: var(--blue-mid); transform: translateY(-1px); }


/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Scroll-reveal helper — toggled by IntersectionObserver in each page */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: none; }


/* ─────────────────────────────────────────
   TOAST NOTIFICATION
   Shared utility used by dashboard.html for
   "tab coming soon" feedback and input errors.
───────────────────────────────────────── */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--navy); color: var(--white);
  font-size: 0.84rem; font-weight: 400;
  padding: 10px 20px; border-radius: 100px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 300; white-space: nowrap;
  transition: transform 0.3s cubic-bezier(.34,1.2,.64,1), opacity 0.3s;
  pointer-events: none; opacity: 0;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.error {
  background: var(--red);
}


/* ─────────────────────────────────────────
   INPUT ERROR STATE
   Applied to .input-group when validation fails.
───────────────────────────────────────── */
.input-group.has-error .demo-input,
.input-group.has-error input {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.input-error-msg {
  font-size: 0.75rem; color: var(--red);
  margin-top: 4px; display: none;
}
.input-group.has-error .input-error-msg { display: block; }