/* Student Pop — Colors & Type tokens
 * Extracted from the Style Guide page in the Figma file.
 * Usage: <link rel="stylesheet" href="colors_and_type.css"> then reference vars.
 */

:root {
  /* ───────────────────────── PRIMARY PALETTE ───────────────────────── */
  --sp-white:          #ffffff;
  --sp-grey:           #b6b6b6;   /* secondary text, divider grey */
  --sp-charcoal:       #343838;   /* body text on pale bg */
  --sp-black:          #250e0e;   /* primary text (warm near-black) */
  --sp-true-black:     #1e1e1e;   /* rare, pure-ish black */
  --sp-dark-purple:    #1c184a;   /* brand deep indigo, CTAs on pale bg */
  --sp-almost-blue:    #36bdbd;   /* signature teal / CTA gradient base */
  --sp-pale-red:       #ee5e6a;   /* danger / warning / pale coral */
  --sp-gold:           #ebc11e;   /* Référent, accent */

  /* Extended accents (seen throughout screens) */
  --sp-yellow-soft:    #fbe385;
  --sp-pink-soft:      #fbaec8;
  --sp-peach-soft:     #f7c391;
  --sp-rose-soft:      #f3b9de;
  --sp-pink-hot:       #fe4893;   /* "À finaliser" status */
  --sp-pink-mid:       #ee5ecc;   /* Street marketing tab */
  --sp-orange:         #ff7355;
  --sp-red-alert:      #ff3903;
  --sp-red-deep:       #d44f46;
  --sp-magenta:        #b80086;
  --sp-violet:         #b73baf;
  --sp-backup-purple:  #a18ce6;   /* Student "Backup" state */
  --sp-staff-teal:     #36bdbd;   /* Student "Staffé" */
  --sp-ref-gold:       #ebc11e;
  --sp-destaff-black:  #250e0e;

  /* ───────────── MISSION COLORS (circular badges, gradients) ───────── */
  --sp-mission-animation-start:  #ffa4ea;
  --sp-mission-animation-end:    #ee5ecc;
  --sp-mission-event-start:      #c0c1f0;
  --sp-mission-event-end:        #bc87f8;
  --sp-mission-coupdepouce-start:#37ff63;
  --sp-mission-coupdepouce-end:  #00ed35;
  --sp-mission-service-start:    #9adfff;
  --sp-mission-service-end:      #3ec2ff;
  --sp-mission-autre-start:      #ffd73e;
  --sp-mission-autre-end:        #ebc11e;

  /* Mission pale backgrounds (paired) */
  --sp-mission-animation-bg:     #fceaf8;
  --sp-mission-event-bg:         #f8f3fe;
  --sp-mission-coupdepouce-bg:   #e6fceb;
  --sp-mission-service-bg:       #edf9fe;
  --sp-mission-empty-bg:         #fdeef0;
  --sp-mission-autre-bg:         #fdf9e8;

  /* ────────────────────── NEUTRAL SURFACES ─────────────────────────── */
  --sp-bg:            #ffffff;
  --sp-bg-off:        #f7f5f1;   /* off-white warm */
  --sp-bg-cream:      #fffcf0;   /* cream strip */
  --sp-bg-sand:       #f5f1ed;   /* Students section bg */
  --sp-bg-periwinkle: #f3f4fa;   /* Primary colors bg */
  --sp-bg-lilac:      #f8f3fe;   /* Mission types bg */
  --sp-border:        #d9d9d9;
  --sp-border-soft:   #ececec;
  --sp-text-muted:    #979797;
  --sp-text-placeholder: #b0a8a8;

  /* ───────────────────────── SEMANTIC ──────────────────────────────── */
  --sp-fg:           var(--sp-black);
  --sp-fg-muted:     var(--sp-charcoal);
  --sp-fg-subtle:    var(--sp-grey);
  --sp-fg-placeholder: var(--sp-text-placeholder);
  --sp-fg-inverse:   var(--sp-white);
  --sp-link:         var(--sp-dark-purple);
  --sp-success:      var(--sp-mission-coupdepouce-end);
  --sp-warning:      var(--sp-gold);
  --sp-danger:       var(--sp-pale-red);
  --sp-accent:       var(--sp-almost-blue);

  /* ───────────────────────── SHADOWS ───────────────────────────────── */
  --sp-shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --sp-shadow-sm:   0 2px 8px rgba(0,0,0,0.08);
  --sp-shadow-md:   0 8px 24px rgba(0,0,0,0.12);
  --sp-shadow-lg:   0 20px 40px rgba(0,0,0,0.18);
  --sp-shadow-cta:  0 10px 24px rgba(28,24,74,0.22);

  /* ───────────────────────── RADII ─────────────────────────────────── */
  --sp-radius-xs:  4px;
  --sp-radius-sm:  5px;    /* input fields */
  --sp-radius-md:  10px;
  --sp-radius-lg:  15px;   /* CTAs, job cards */
  --sp-radius-xl:  20px;
  --sp-radius-pill: 999px;

  /* ───────────────────────── SPACING ───────────────────────────────── */
  --sp-space-1:  4px;
  --sp-space-2:  8px;
  --sp-space-3:  12px;
  --sp-space-4:  16px;
  --sp-space-5:  20px;
  --sp-space-6:  24px;
  --sp-space-8:  32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;

  /* ───────────────────────── TYPOGRAPHY ────────────────────────────── */
  /* Student Pop uses Apple's SF Pro family throughout the app.
     Web substitutions below (loaded via @font-face in fonts/fonts.css). */
  --sp-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sp-font-text:    "SF Pro Text",    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sp-font-rounded: "SF Pro Rounded", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --sp-font-headline: "Montserrat", "SF Pro Display", system-ui, sans-serif;   /* huge editorial numbers */

  /* Font-weight scale */
  --sp-weight-regular:  400;
  --sp-weight-medium:   500;
  --sp-weight-semibold: 600;
  --sp-weight-bold:     700;
  --sp-weight-heavy:    900;

  /* Type scale (mobile-first, in px) */
  --sp-text-9:   9px;
  --sp-text-10:  10px;
  --sp-text-11:  11px;
  --sp-text-12:  12px;
  --sp-text-13:  13px;
  --sp-text-14:  14px;
  --sp-text-15:  15px;
  --sp-text-16:  16px;
  --sp-text-17:  17px;
  --sp-text-18:  18px;
  --sp-text-20:  20px;
  --sp-text-22:  22px;
  --sp-text-24:  24px;
  --sp-text-28:  28px;
  --sp-text-30:  30px;
  --sp-text-34:  34px;
  --sp-text-40:  40px;
  --sp-text-50:  50px;   /* "132€" job price */

  /* Line heights */
  --sp-lh-tight:  100%;
  --sp-lh-snug:   115%;
  --sp-lh-normal: 130%;

  /* Letter spacing (tracked in Figma in px at 18/20/50 sizes) */
  --sp-track-tight-sm: -0.289px;   /* 12px */
  --sp-track-tight-md: -0.437px;   /* 18px body CTA */
  --sp-track-tight-lg: -1.206px;   /* 50px hero price */
}

/* ───────────── SEMANTIC TYPE CLASSES ───────────── */
.sp-h1 {
  font-family: var(--sp-font-display);
  font-weight: var(--sp-weight-bold);
  font-size: 34px;
  line-height: var(--sp-lh-tight);
  letter-spacing: -0.8px;
  color: var(--sp-fg);
}
.sp-h2 {
  font-family: var(--sp-font-display);
  font-weight: var(--sp-weight-bold);
  font-size: 28px;
  line-height: var(--sp-lh-tight);
  letter-spacing: -0.6px;
  color: var(--sp-fg);
}
.sp-h3 {
  font-family: var(--sp-font-text);
  font-weight: var(--sp-weight-bold);
  font-size: 20px;
  line-height: var(--sp-lh-tight);
  letter-spacing: var(--sp-track-tight-md);
  color: var(--sp-fg);
}
.sp-display-italic {
  /* Used for Style-Guide section titles; italic SF Display */
  font-family: var(--sp-font-display);
  font-style: italic;
  font-weight: var(--sp-weight-regular);
  font-size: 50px;
  line-height: var(--sp-lh-tight);
}
.sp-hero-number {
  /* Montserrat Black — used for huge editorial numbers */
  font-family: var(--sp-font-headline);
  font-weight: var(--sp-weight-heavy);
  font-size: 104px;
  line-height: 0.9;
  letter-spacing: -2px;
}
.sp-body {
  font-family: var(--sp-font-text);
  font-weight: var(--sp-weight-regular);
  font-size: 15px;
  line-height: 1.35;
  color: var(--sp-fg);
}
.sp-body-strong {
  font-family: var(--sp-font-text);
  font-weight: var(--sp-weight-semibold);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.36px;
  color: var(--sp-fg);
}
.sp-caption {
  font-family: var(--sp-font-text);
  font-weight: var(--sp-weight-regular);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: var(--sp-track-tight-sm);
  color: var(--sp-fg-subtle);
}
.sp-label {
  /* Uppercase eyebrow — often used above inputs (Bold, 10px) */
  font-family: var(--sp-font-text);
  font-weight: var(--sp-weight-bold);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--sp-text-placeholder);
}
.sp-key {
  /* Rounded Heavy — used on keyboard keys, dots counters */
  font-family: var(--sp-font-rounded);
  font-weight: var(--sp-weight-heavy);
  font-size: 13px;
}
.sp-price {
  font-family: var(--sp-font-text);
  font-weight: var(--sp-weight-regular);
  font-size: 50px;
  letter-spacing: var(--sp-track-tight-lg);
  line-height: 1;
  color: var(--sp-fg);
}
.sp-cta-text {
  font-family: var(--sp-font-text);
  font-weight: var(--sp-weight-bold);
  font-size: 18px;
  letter-spacing: var(--sp-track-tight-md);
  line-height: 1;
  color: var(--sp-white);
}

/* ───────────── SIGNATURE GRADIENTS ───────────── */
.sp-grad-cta-teal {
  background: linear-gradient(135deg, rgba(102,224,224,0.95) 0%, rgba(71,201,201,0.95) 28%, rgba(54,189,189,0.95) 100%);
  backdrop-filter: blur(54px);
}
.sp-grad-mission-animation { background: linear-gradient(135deg, #ffa4ea 0%, #ee5ecc 100%); }
.sp-grad-mission-event     { background: linear-gradient(135deg, #c0c1f0 0%, #bc87f8 100%); }
.sp-grad-mission-coupdepouce { background: linear-gradient(135deg, #37ff63 0%, #00ed35 100%); }
.sp-grad-mission-service   { background: linear-gradient(135deg, #9adfff 0%, #3ec2ff 100%); }
.sp-grad-mission-autre     { background: linear-gradient(180deg, #ffd73e 0%, #f3ca28 34%, #ebc11e 100%); }
.sp-grad-bottom-blur {
  /* white-to-transparent protection gradient used under sticky CTAs */
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, #ffffff 100%);
}