/* ============================================================
   PORTE OUVERTE — tokens.css
   Design system override layer — loads LAST.

   Spacing rationale: section padding follows --section-pad (5rem
   desktop / 3rem mobile); cards use 1.5rem internal padding and
   1.5rem grid gaps (1rem for tight rows) — already applied via
   Bootstrap's g-3/g-4 utilities in the markup.
   ============================================================ */

:root {
  /* ── Brand tokens (source of truth) ── */
  --brand-primary:   #A42137; /* crimson — CTA / action color */
  --brand-secondary: #00ADBB; /* teal — links, highlights, dividers */
  --brand-accent:    #0A0A0A; /* near-black — signature stripe + dark surfaces */
  --brand-bg:        #FFFFFF;
  --brand-surface:   #F9F9F9; /* ivory */
  --brand-text:      #0A0A0A;
  --brand-muted:     #767676;

  /* ── Wire into Bootstrap ── */
  --bs-primary: var(--brand-primary);
  --bs-font-sans-serif: 'Nunito', system-ui, sans-serif;
  --bs-border-radius: 0.3rem;
  --bs-border-radius-lg: 0.5rem;

  /* ── Layered shadow system (overrides style.css originals) ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.07), 0 4px 20px rgba(0,0,0,0.05);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.06);

  /* ── Spacing discipline ── */
  --section-pad: 5rem 0;

  /* ── Legacy aliases -> brand tokens (avoids a project-wide rename) ── */
  --navy:          var(--brand-accent);
  --gold:          var(--brand-secondary);
  --gold-light:    #22C5D2;
  --crimson:       var(--brand-primary);
  --crimson-light: #C42D48;
  --ivory:         var(--brand-surface);
}

@media (max-width: 768px) {
  :root { --section-pad: 3rem 0; }
}

/* ── Type scale refinements ── */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.class-card-title {
  font-size: 1.25rem;
}

.label-caption {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Signature element: top accent stripe on cards ──
   A 3px crimson-to-teal gradient bar unifies every card-like
   surface across the public site and the admin panel. */
.class-card,
.admin-card,
.dash-course-card,
.how-step,
.login-box {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}

.class-card::before,
.admin-card::before,
.dash-course-card::before,
.how-step::before,
.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
  z-index: 1;
}