/* ============================================================
 * Festivale Peoples Choice — festival reskin
 * Overrides OzBook tokens with the multi-colour festival palette
 * pulled from the Festivale logo (purple / orange / gold / green / red).
 * Structure & components stay OzBook; only the colour roles shift.
 * ============================================================ */
@import url('./ozbook-tokens.css');

:root {
  /* Raw festival palette */
  --fes-purple-50:  #F4ECF8;
  --fes-purple-100: #E6D2F0;
  --fes-purple-200: #C9A2DF;
  --fes-purple-300: #A86BC9;
  --fes-purple-400: #8442A8;
  --fes-purple-500: #6B2F8C;   /* PRIMARY — deep festival purple */
  --fes-purple-600: #582677;
  --fes-purple-700: #421A5A;
  --fes-purple-800: #2C1140;
  --fes-purple-900: #180722;

  --fes-orange-50:  #FCEDE1;
  --fes-orange-100: #F9D7BB;
  --fes-orange-200: #F2AC78;
  --fes-orange-300: #EB8744;
  --fes-orange-400: #E5651F;   /* warm orange from the logo */
  --fes-orange-500: #C44F0F;

  --fes-gold-50:    #FEF5DA;
  --fes-gold-100:   #FCE8A2;
  --fes-gold-200:   #F8D45E;
  --fes-gold-300:   #F4C430;   /* SECONDARY — sunshine yellow */
  --fes-gold-400:   #E0AC15;
  --fes-gold-500:   #B58608;

  --fes-green-50:   #ECF6E5;
  --fes-green-100:  #D0EAB6;
  --fes-green-200:  #A4D67A;
  --fes-green-300:  #7CC04A;
  --fes-green-400:  #5BAA3E;   /* SUCCESS — fresh grass green */
  --fes-green-500:  #468C2D;

  --fes-red-50:     #FBE4E1;
  --fes-red-300:    #E5614F;
  --fes-red-400:    #D63A2A;   /* DANGER — warm festival red */
  --fes-red-500:    #B22B1F;

  /* Warm neutral stack (lighter, paper-cream feel) */
  --fes-ink-50:     #FDFBF7;   /* lightest cream */
  --fes-ink-100:    #F7F1E6;
  --fes-ink-200:    #E8DECF;
  --fes-ink-300:    #B6A998;
  --fes-ink-400:    #6E6256;
  --fes-ink-500:    #2A2218;   /* dark grey, body text */
  --fes-ink-700:    #14110A;   /* near-black, primary text */
  --fes-ink-800:    #0A0805;
}

/* ============================================================
 * Re-map OzBook semantic tokens to festival values
 * ============================================================ */
:root,
[data-bs-theme="light"] {
  --ob-surface-app:        var(--fes-ink-50);     /* page bg: light cream */
  --ob-surface-1:          #FFFFFF;               /* card */
  --ob-surface-2:          #FBF6EC;               /* lighter sunken */
  --ob-surface-3:          #F4EDDF;               /* deepest sunken still light */
  --ob-surface-inverse:    var(--fes-purple-700);
  --ob-surface-overlay:    rgba(44, 17, 64, 0.55);

  --ob-fg-1:               var(--fes-ink-700);    /* primary text — near-black */
  --ob-fg-2:               var(--fes-ink-500);    /* secondary — dark grey */
  --ob-fg-3:               var(--fes-ink-400);    /* tertiary — medium grey */
  --ob-fg-muted:           var(--fes-ink-300);
  --ob-fg-inverse:         #FFFFFF;
  --ob-fg-link:            var(--fes-purple-500);
  --ob-fg-link-hover:      var(--fes-purple-600);

  --ob-border-1:           #EFE5D2;
  --ob-border-2:           #DFD2BB;
  --ob-border-focus:       var(--fes-purple-400);
  --ob-border-input:       #DFD0B6;

  --ob-primary:            var(--fes-purple-500);
  --ob-primary-hover:      var(--fes-purple-600);
  --ob-primary-active:     var(--fes-purple-700);
  --ob-primary-soft:       var(--fes-purple-50);
  --ob-primary-on:         #FFFFFF;

  --ob-secondary:          var(--fes-orange-400);
  --ob-secondary-hover:    var(--fes-orange-500);
  --ob-secondary-active:   var(--fes-orange-500);
  --ob-secondary-soft:     var(--fes-orange-50);
  --ob-secondary-on:       #FFFFFF;

  --ob-tertiary:           var(--fes-ink-700);
  --ob-tertiary-on:        #FFFFFF;

  --ob-success:            var(--fes-green-400);
  --ob-success-soft:       var(--fes-green-50);
  --ob-warning:            var(--fes-gold-300);
  --ob-warning-soft:       var(--fes-gold-50);
  --ob-danger:             var(--fes-red-400);
  --ob-danger-soft:        var(--fes-red-50);
  --ob-info:               #2C6E7F;
  --ob-info-soft:          #E7EEF0;

  --ob-pos:                var(--fes-green-400);
  --ob-neg:                var(--fes-red-400);
  --ob-zero:               var(--fes-ink-400);

  --ob-selection-bg:       var(--fes-purple-100);
  --ob-selection-fg:       var(--fes-ink-700);
  --ob-ring:               0 0 0 3px rgba(107, 47, 140, 0.25);

  --ob-shadow-xs: 0 1px 0 rgba(44, 17, 64, 0.04);
  --ob-shadow-sm: 0 1px 2px rgba(44, 17, 64, 0.06), 0 1px 1px rgba(44, 17, 64, 0.03);
  --ob-shadow-md: 0 4px 12px rgba(44, 17, 64, 0.10), 0 2px 4px rgba(44, 17, 64, 0.05);
  --ob-shadow-lg: 0 12px 28px rgba(44, 17, 64, 0.14), 0 4px 8px rgba(44, 17, 64, 0.07);
  --ob-shadow-xl: 0 24px 48px rgba(44, 17, 64, 0.20), 0 8px 16px rgba(44, 17, 64, 0.10);

  /* Festival hero — multi-stop gradient referencing the logo */
  --ob-hero-bg: linear-gradient(135deg,
    var(--fes-purple-600) 0%,
    var(--fes-purple-500) 25%,
    var(--fes-orange-400) 60%,
    var(--fes-gold-300) 100%
  );

  /* Bootstrap aliases follow new primary */
  --bs-primary:    var(--ob-primary);
  --bs-primary-rgb: 107, 47, 140;
  --bs-secondary:  var(--ob-secondary);
  --bs-secondary-rgb: 229, 101, 31;
  --bs-success-rgb: 91, 170, 62;
  --bs-warning-rgb: 244, 196, 48;
  --bs-danger-rgb: 214, 58, 42;
}

/* ============================================================
 * Festival-specific utilities
 * ============================================================ */
.fes-hero {
  background: var(--ob-hero-bg);
  color: #fff;
}
.fes-stripe-bg {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0) 0 18px,
      rgba(255,255,255,0.06) 18px 19px
    );
}

/* Multi-colour confetti dots — used on success */
.fes-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.fes-confetti span {
  position: absolute;
  width: 10px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: fes-confetti-fall 2.4s var(--ob-ease-out) forwards;
}
@keyframes fes-confetti-fall {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(560px) rotate(540deg); opacity: 0; }
}

/* Rainbow chip — small badge with multi-colour border */
.fes-rainbow-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: var(--ob-radius-pill);
  background: var(--ob-surface-1);
  border: 1px solid var(--ob-border-1);
  font-size: 11px; font-weight: 600;
  color: var(--ob-fg-2);
}
.fes-rainbow-chip::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: conic-gradient(
    var(--fes-purple-500), var(--fes-orange-400),
    var(--fes-gold-300), var(--fes-green-400),
    var(--fes-red-400), var(--fes-purple-500)
  );
}

/* Logo mark — re-uses the stacked PNG, scales by font-size */
.fes-logo-mark {
  display: inline-block;
  width: 1em; height: 1em;
  background: url('../images/festivale-logo-stacked-reverse.png') no-repeat center / contain;
}

/* Festival rank chip (1st/2nd/3rd) */
.fes-rank {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--ob-font-mono);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.fes-rank-1 { background: var(--fes-gold-300); color: var(--fes-ink-800); }
.fes-rank-2 { background: var(--fes-purple-200); color: var(--fes-purple-700); }
.fes-rank-3 { background: var(--fes-orange-200); color: var(--fes-orange-500); }
.fes-rank-n { background: var(--ob-surface-2); color: var(--ob-fg-2); }