/* =====================================================================
   Concours Médecine — Design Tokens
   Colors + Typography for ConcoursMedecine.ma
   ===================================================================== */

/* ---------- Fonts ----------------------------------------------------- */
/* SUBSTITUTION NOTE: original site is a generic Bootstrap-style theme
   with no distinctive web fonts. The product packaging (boxes) uses a
   transitional serif for "CONCOURS MÉDECINE" — closest match is
   Playfair Display. Body is set in Manrope, a friendly humanist sans
   that pairs well with the warm educational palette. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===================================================================
     COLOR PRIMITIVES
     =================================================================== */

  /* — Médecine palette (primary brand) — saffron/mustard + coral strip — */
  --saffron-50:  #FFF8E1;
  --saffron-100: #FDECB4;
  --saffron-200: #FADF85;
  --saffron-300: #F6CE4A;
  --saffron-400: #F0B419;   /* primary brand yellow — box panel */
  --saffron-500: #D99A0B;
  --saffron-600: #B07C04;
  --saffron-700: #855C00;

  --coral-50:  #FFEDE3;
  --coral-100: #FFD1B5;
  --coral-300: #F09071;
  --coral-400: #E26B3F;
  --coral-500: #D14B1A;     /* bottom strip on Médecine box */
  --coral-600: #A93A10;

  /* — ENSA palette — navy + gold — */
  --navy-50:  #E5EAF5;
  --navy-200: #97A8D2;
  --navy-400: #3F5BAB;
  --navy-600: #1E3A8A;      /* ENSA primary */
  --navy-800: #11215C;
  --navy-900: #0A1638;

  /* — ENCG/TAFEM palette — teal — */
  --teal-50:  #E0F4F1;
  --teal-300: #5DBFAF;
  --teal-500: #2BA08F;
  --teal-600: #1E8775;      /* ENCG primary */
  --teal-800: #0F564B;

  /* — Content semantics — exercise sheet system — */
  --enonce-bg:    #FFF1C4;  /* cream content area for question prompts */
  --enonce-band:  #F0B419;  /* yellow band heading "Énoncé" / "Question" */
  --corrige-bg:   #DDEEDB;  /* mint content area for solutions */
  --corrige-band: #3FA34D;  /* green band heading "Corrigé" */
  --corrige-band-dark: #2E7D32;

  /* — Neutrals — */
  --ink-950: #0B0B0C;       /* heaviest text — display headings */
  --ink-900: #161618;
  --ink-800: #25262A;
  --ink-700: #3A3B41;
  --ink-500: #6E6F77;       /* secondary text */
  --ink-400: #9396A0;
  --ink-300: #C5C7CD;
  --ink-200: #E2E4E8;
  --ink-100: #F2F3F5;
  --ink-50:  #FAFAFB;
  --paper:   #FFFFFF;

  /* — Status — */
  --success: #3FA34D;
  --warning: #F0B419;
  --danger:  #D14B1A;
  --info:    #1E3A8A;

  /* ===================================================================
     SEMANTIC COLOR TOKENS
     =================================================================== */
  --bg:           var(--paper);
  --bg-soft:      var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-warm:      var(--saffron-50);

  --fg:           var(--ink-900);
  --fg-secondary: var(--ink-700);
  --fg-tertiary:  var(--ink-500);
  --fg-muted:     var(--ink-400);
  --fg-on-brand:  var(--ink-950);     /* text sits on yellow */
  --fg-on-coral:  #FFFFFF;
  --fg-on-navy:   #FFFFFF;
  --fg-on-teal:   #FFFFFF;

  --brand:           var(--saffron-400);
  --brand-strong:    var(--saffron-500);
  --brand-soft:      var(--saffron-50);
  --accent:          var(--coral-500);
  --accent-strong:   var(--coral-600);
  --accent-soft:     var(--coral-50);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --divider:       var(--ink-100);

  --ring:          color-mix(in oklab, var(--saffron-400) 60%, transparent);

  /* ===================================================================
     TYPOGRAPHY — Type families & scale
     =================================================================== */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Modular scale — base 16, ratio ~1.2 (minor third) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  84px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.18em;   /* used heavily on the boxes: "SE BIEN PRÉPARER AU" */

  /* ===================================================================
     SPACING & RADII & ELEVATION
     =================================================================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px;--sp-16: 64px;--sp-20: 80px; --sp-24: 96px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20,18,10,0.06);
  --shadow-sm: 0 2px 6px rgba(20,18,10,0.08);
  --shadow-md: 0 8px 24px rgba(20,18,10,0.10), 0 2px 6px rgba(20,18,10,0.06);
  --shadow-lg: 0 22px 50px rgba(20,18,10,0.14), 0 6px 14px rgba(20,18,10,0.06);
  --shadow-pop:0 30px 80px rgba(40,18,2,0.25);  /* product box shadow */
}

/* =====================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ===================================================================== */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink-950);
}

.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink-950);
  margin: 0;
}

.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0;
}

.t-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0;
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0;
}

.t-uppercase-display {
  /* The exact treatment from the product boxes — "CONCOURS MÉDECINE" */
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-4xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink-950);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.t-body, p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0;
}

.t-small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.t-caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wide);
}

.t-mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.t-price {
  /* Pricing display — "249.00 DH / an" */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-4xl);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-950);
}

.t-price-strike {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--fg-tertiary);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}