/* =====================================================================
   Western Pickleball Center: global styles
   Design tokens, base element styles, surface primitives and motion.

   Utility classes come from Tailwind, compiled at build time with the theme
   in tailwind.config.js. Keep the palette below in sync with the
   `rustic` colors there.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Design tokens
   *-rgb tokens hold space-separated channels so alpha can be applied:
   rgb(var(--wpc-leather-rgb) / 0.15)
   --------------------------------------------------------------------- */
:root {
    /* Core palette from logo */
    --wpc-espresso: #413836;     /* dark charcoal / deep wood */
    --wpc-terracotta: #a1513e;   /* warm clay / rust red */
    --wpc-leather: #ba844c;      /* warm saddle / golden amber */
    --wpc-cream: #efe3ca;        /* warm ivory parchment */
    --wpc-sand: #ceae8b;         /* warm driftwood / kraft tan */

    /* Supporting UI tones */
    --wpc-base: #181413;         /* deepest dark timber base */
    --wpc-surface: #221c1a;      /* dark warm wood surface */
    --wpc-card: #2c2422;         /* elevated card surface */
    --wpc-muted: #a89887;        /* subdued body text */
    --wpc-parchment: #faf6ee;    /* light section background */

    /* Light surfaces (booking & checkout, matching the homepage's light sections) */
    --wpc-paper: #ffffff;        /* panels on parchment */
    --wpc-line: #e5d8c8;         /* panel borders */
    --wpc-line-strong: #d6c4ad;  /* input borders */
    --wpc-ink: #413836;          /* headings on light (espresso) */
    --wpc-ink-soft: #61514c;     /* body text on light */
    --wpc-ink-faint: #7a6a63;    /* hints and secondary labels on light */
    --wpc-terracotta-wash: #f6e8e3;
    --wpc-terracotta-dark: #87412f;
    --wpc-sand-wash: #f3ebd9;    /* table headers, quiet fills */
    --wpc-error: #b3261e;
    --wpc-success: #3d6b45;

    /* Reports heat scale, quiet to busy: ink text on 0-2, white on 3-4 (all AA) */
    --wpc-heat-0: #eef2ea;
    --wpc-heat-1: #d3ebc6;
    --wpc-heat-2: #9ccf85;
    --wpc-heat-3: #377a3d;
    --wpc-heat-4: #1e4d2b;

    /* Court drawing */
    --wpc-court-surface: #ceae8b; /* service areas, matches the real courts */
    --wpc-court-blue: #4f87c5;    /* kitchen on courts 1, 2, 4 and 5 */
    --wpc-court-line: #ffffff;

    /* Hover shades */
    --wpc-terracotta-hover: #b55e49;
    --wpc-leather-hover: #c89254;

    /* Channel tokens for translucent colors */
    --wpc-espresso-rgb: 65 56 54;
    --wpc-terracotta-rgb: 161 81 62;
    --wpc-leather-rgb: 186 132 76;
    --wpc-sand-rgb: 206 174 139;
    --wpc-surface-rgb: 34 28 26;
    --wpc-card-rgb: 44 36 34;
    --wpc-base-rgb: 24 20 19;

    /* Typography (families are loaded from Google Fonts in each page <head>) */
    --wpc-font-sans: 'Outfit', sans-serif;
    --wpc-font-serif: 'Playfair Display', serif;

    /* Motion */
    --wpc-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --wpc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
body {
    background-color: var(--wpc-base);
    color: var(--wpc-cream);
    font-family: var(--wpc-font-sans);
}

::selection {
    background-color: var(--wpc-terracotta);
    color: var(--wpc-cream);
}

/* Wood/sand scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--wpc-base);
}

::-webkit-scrollbar-thumb {
    background: var(--wpc-espresso);
    border-radius: 4px;
    border: 1px solid rgb(var(--wpc-sand-rgb) / 0.15);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wpc-leather);
}

/* ---------------------------------------------------------------------
   Surface primitives
   --------------------------------------------------------------------- */

/* Light parchment section with a dotted architectural pattern */
.light-pattern {
    background-color: var(--wpc-parchment);
    background-image: radial-gradient(rgb(var(--wpc-leather-rgb) / 0.13) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Warm ambient corner glows for dark hero areas */
.hero-glow {
    background: radial-gradient(circle at top right, rgb(var(--wpc-leather-rgb) / 0.18) 0%, transparent 50%),
                radial-gradient(circle at bottom left, rgb(var(--wpc-terracotta-rgb) / 0.2) 0%, transparent 50%);
}

/* ---------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------- */

/* Scroll reveal: main.js adds .active once the element enters the viewport */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--wpc-ease-out-expo);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for .reveal transitions and animate-* entrances.
   Declared after .reveal so they override the shorthand's zero delay. */
.stagger-1 {
    transition-delay: 0.1s;
    animation-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
    animation-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
    animation-delay: 0.3s;
}

/* ---------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--wpc-terracotta);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}