/* Theme: Funfair.
 *
 * The big lift. Violet and magenta with amber and cyan accents, rounded Fredoka
 * display type, gradient chrome, generous radii and a visible lift on anything
 * clickable. This is the deliberate break from the marketing site palette that the
 * client asked for.
 *
 * KNOWN ISSUE: logo.png is brand green (#0C4E2D) and clashes against this palette.
 * A logo variant is needed before this theme ships as the default - see the sprint
 * brief. Seaside is the logo-safe alternative.
 *
 * Token contract is documented in classic.css. Every token defined there must be
 * defined here too.
 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
    /* -- Main app: type ------------------------------------------- */
    --lpb-root-font-size: 14px;
    --lpb-root-font-size-md: 16px;
    --lpb-font-body: 'Nunito', 'Segoe UI', sans-serif;
    --lpb-font-heading: 'Fredoka', 'Trebuchet MS', sans-serif;
    --lpb-font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
    --lpb-heading-weight: 600;
    --lpb-heading-spacing: -0.01em;

    /* -- Main app: colour ----------------------------------------- */
    --lpb-primary: #6D28D9;
    --lpb-primary-dark: #5B21B6;
    --lpb-primary-light: #8B5CF6;
    --lpb-primary-muted: rgba(109, 40, 217, 0.09);
    --lpb-primary-focus-ring: rgba(109, 40, 217, 0.35);
    --lpb-primary-focus-ring-soft: rgba(109, 40, 217, 0.20);

    --lpb-text: #2A1A3E;
    --lpb-text-muted: #6B5B85;
    --lpb-heading-color: #5B21B6;
    --lpb-display-color: #EC4899;

    --lpb-page-bg: #FDF7FF;
    --lpb-surface: #ffffff;
    --lpb-border: #EBDCF7;
    --lpb-border-strong: #C3A9E0;

    --lpb-success: #10B981;
    --lpb-warning: #F59E0B;
    --lpb-danger: #F43F5E;
    --lpb-info: #06B6D4;
    --lpb-secondary: #8B7AA8;

    /* -- Main app: chrome ----------------------------------------- */
    --lpb-topbar-bg: linear-gradient(90deg, #6D28D9 0%, #A21CAF 50%, #EC4899 100%);
    --lpb-topbar-fg: rgba(255, 255, 255, 0.94);
    --lpb-topbar-fg-hover: #FFD166;
    --lpb-topbar-social-border: rgba(255, 255, 255, 0.6);
    --lpb-topbar-social-hover-bg: rgba(255, 255, 255, 0.22);

    --lpb-navbar-bg: #ffffff;
    --lpb-navbar-border: 2px solid rgba(109, 40, 217, 0.15);
    --lpb-navbar-fg: #5B21B6;
    --lpb-navbar-fg-hover: #EC4899;
    --lpb-navbar-fg-active: #EC4899;
    --lpb-navlink-weight: 600;
    --lpb-navlink-underline: 3px;

    --lpb-footer-bg: linear-gradient(90deg, #EC4899 0%, #A21CAF 50%, #6D28D9 100%);
    --lpb-footer-fg: rgba(255, 255, 255, 0.92);
    --lpb-footer-fg-hover: #FFD166;

    /* -- Main app: shape ------------------------------------------ */
    --lpb-radius-btn: 100px;
    --lpb-radius-card: 20px;
    --lpb-radius-input: 14px;
    --lpb-radius-badge: 999px;

    --lpb-shadow-navbar: 0 4px 16px rgba(109, 40, 217, 0.10);
    --lpb-shadow-card: 0 6px 18px rgba(109, 40, 217, 0.10);
    --lpb-shadow-card-hover: 0 14px 34px rgba(109, 40, 217, 0.22);
    --lpb-shadow-btn-hover: 0 8px 20px rgba(236, 72, 153, 0.35);
    --lpb-shadow-soft: 0 .4rem 1rem rgba(109, 40, 217, .09);

    --lpb-card-lift: -4px;
    --lpb-btn-lift: -2px;

    --lpb-btn-primary-bg: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --lpb-btn-primary-bg-hover: linear-gradient(135deg, #6D28D9 0%, #DB2777 100%);
    --lpb-btn-primary-fg: #ffffff;

    --lpb-alert-accent-width: 5px;

    /* -- Main app: tables ----------------------------------------- */
    --lpb-table-head-bg: #F3E8FF;
    --lpb-table-head-fg: #5B21B6;
    --lpb-table-head-border: #EBDCF7;
    --lpb-table-hover-bg: rgba(109, 40, 217, 0.07);
    --lpb-table-stripe-bg: rgba(109, 40, 217, 0.045);

    /* -- Caller console call board -------------------------------- */
    --lpb-ball-bg: #F1E7FB;
    --lpb-ball-fg: #9A82B8;
    --lpb-ball-border: #E4D5F5;
    --lpb-ball-called-bg: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    --lpb-ball-called-fg: #ffffff;
    --lpb-ball-called-border: #5B21B6;
    --lpb-ball-current-bg: #F59E0B;
    --lpb-ball-current-fg: #3A2500;
    --lpb-ball-current-border: #D97706;
    --lpb-ball-current-glow: rgba(245, 158, 11, 0.45);

    /* -- Public screen: dark mode (its default) -------------------- */
    --ps-font-body: 'Nunito', 'Segoe UI', sans-serif;
    --ps-font-display: 'Fredoka', 'Trebuchet MS', sans-serif;

    --bg-page: #1A0B2E;
    --bg-cell: #2D1B4E;
    --bg-cell-called: #7C3AED;
    --bg-cell-current: #FF2E7E;
    --border-cell: #3F2A63;
    --border-cell-called: #A78BFA;
    --border-cell-current: #FF7AAC;
    --color-cell: #8C74B0;
    --color-cell-called: #ffffff;
    --color-cell-current: #ffffff;
    --glow-cell-current: rgba(255, 46, 126, 0.65);
    --color-number: #ffffff;
    --text-shadow-number: 0 0 50px rgba(236, 72, 153, 0.5);
    --color-header: #B39BD8;
    --bg-ball: #7C3AED;
    --border-ball: #A78BFA;
    --color-ball: #ffffff;
    --bg-prize-badge: #3D2A0A;
    --border-prize-badge: #FFD166;
    --color-prize-badge: #FFD166;
    --bg-snowball: #0E3D52;
    --border-snowball: #4CC9F0;
    --color-snowball: #9FE4F8;
    --bg-snowball-urgent: #5C1030;
    --border-snowball-urgent: #FF2E7E;
    --color-snowball-urgent: #FF9CC2;
    --bg-snowball-passed: #4A3405;
    --border-snowball-passed: #E0A800;
    --color-snowball-passed: #FFD467;
    --bg-pill: #2D1B4E;
    --border-pill: #3F2A63;
    --color-pill: #B39BD8;
    --bg-step: #23133D;
    --border-step: #3F2A63;
    --bg-step-current: #3D2A0A;
    --border-step-current: #FFD166;
    --color-step-current: #FFD166;
    --glow-step-current: rgba(255, 209, 102, 0.4);
    --bg-step-fulfilled: #1E2F4A;
    --border-step-fulfilled: #4CC9F0;
    --color-step-fulfilled: #9FE4F8;
    --color-step-label: #ffffff;
    --color-step-sub: #8C74B0;
    --bg-connector: #3F2A63;
    --color-ended: #FFD166;
    --bg-toggle: #2D1B4E;
    --border-toggle: #3F2A63;
    --color-toggle: #B39BD8;

    --bg-info-pill: rgba(159, 228, 248, 0.12);
    --border-info-pill: rgba(159, 228, 248, 0.4);
    --color-info-pill: #9FE4F8;

    /* -- Public screen: overlays ---------------------------------- */
    --bg-overlay-scrim: rgba(26, 11, 46, 0.94);
    --border-check-overlay: #4CC9F0;
    --glow-check-overlay: rgba(76, 201, 240, 0.3);
    --color-check-label: #9FE4F8;
    --border-incorrect-overlay: #FF2E7E;
    --glow-incorrect-overlay: rgba(255, 46, 126, 0.4);
    --color-incorrect-label: #FF5C9A;
    --glow-claim-overlay: rgba(255, 209, 102, 0.35);
    --color-check-ring: #4CC9F0;
    --glow-check-overlay-alt: rgba(255, 46, 126, 0.5);
    --color-winner-shimmer: #FFF1B8;
    --confetti-1: #4CC9F0;
    --confetti-2: #FF2E7E;
    --confetti-3: #FFD166;
    --confetti-4: #9B5DE5;
    --confetti-5: #3DF5A5;
}

/* -- Public screen: light mode ------------------------------------ */

body.light-mode {
    --bg-page: #FCF5FF;
    --bg-cell: #EDE0FA;
    --bg-cell-called: #7C3AED;
    --bg-cell-current: #FF2E7E;
    --border-cell: #DCC8F0;
    --border-cell-called: #5B21B6;
    --border-cell-current: #FF7AAC;
    --color-cell: #A58EC4;
    --color-cell-called: #ffffff;
    --color-cell-current: #ffffff;
    --color-number: #5B21B6;
    --text-shadow-number: 0 0 40px rgba(236, 72, 153, 0.2);
    --color-header: #7A5FA0;
    --bg-ball: #7C3AED;
    --border-ball: #5B21B6;
    --color-ball: #ffffff;
    --bg-prize-badge: #FFF4D6;
    --border-prize-badge: #E0A800;
    --color-prize-badge: #8A6400;
    --bg-snowball: #D6F1FC;
    --border-snowball: #06B6D4;
    --color-snowball: #0B6C80;
    --bg-snowball-urgent: #FFE0EC;
    --border-snowball-urgent: #FF2E7E;
    --color-snowball-urgent: #A8104B;
    --bg-snowball-passed: #FFF3D1;
    --border-snowball-passed: #E0A800;
    --color-snowball-passed: #8A6400;
    --bg-pill: #F3E8FF;
    --border-pill: #D8BBFE;
    --color-pill: #6D28D9;
    --bg-step: #ffffff;
    --border-step: #DCC8F0;
    --bg-step-current: #FFF4D6;
    --border-step-current: #E0A800;
    --color-step-current: #8A6400;
    --bg-step-fulfilled: #D6F1FC;
    --border-step-fulfilled: #06B6D4;
    --color-step-fulfilled: #0B6C80;
    --color-step-label: #2A1A3E;
    --color-step-sub: #7A5FA0;
    --bg-connector: #DCC8F0;
    --color-ended: #8A6400;
    --bg-toggle: #F3E8FF;
    --border-toggle: #D8BBFE;
    --color-toggle: #6D28D9;

    --bg-info-pill: var(--bg-snowball);
    --border-info-pill: var(--border-snowball);
    --color-info-pill: var(--color-snowball);

    /* Overlays follow the mode - see classic.css. */
    --bg-overlay-scrim: rgba(252, 245, 255, 0.94);
    --color-check-label: #0B6C80;
    --color-incorrect-label: #A8104B;
    --color-check-ring: #0B6C80;
    --glow-check-overlay-alt: rgba(255, 46, 126, 0.4);
    --color-winner-shimmer: #FFF1B8;
    --confetti-1: #4CC9F0;
    --confetti-2: #FF2E7E;
    --confetti-3: #FFB703;
    --confetti-4: #7C3AED;
    --confetti-5: #06D6A0;
}

/* -- Theme extras -------------------------------------------------
   Structure changes this look needs that site.css cannot express as a token. */

/* Gradient card headers are the single loudest signal that this is not the
   corporate theme, so they are worth the extra rule. */
.card-header {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10) 0%, rgba(236, 72, 153, 0.10) 100%);
    border-bottom-color: var(--lpb-border);
    color: var(--lpb-heading-color);
    font-weight: 700;
}

.alert-info { border-left-color: var(--lpb-info); }
.alert-warning { border-left-color: var(--lpb-warning); }
.alert-danger { border-left-color: var(--lpb-danger); }
.alert-success { border-left-color: var(--lpb-success); }

/* The console current number is the one place on the caller screen that should
   feel like a fairground sign. Guarded, because transparent text with no working
   background-clip would leave the caller looking at an invisible number. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    #session-console .display-3 {
        background: linear-gradient(135deg, #7C3AED 0%, #EC4899 60%, #F59E0B 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}