/* ============================================================
   Rankings Ice Beer — Design Tokens
   Single source of truth for the visual system.
   Apple-grade dark mode. Refined Ice identity.
   ============================================================ */

:root {
    /* ---------- Surface (OLED-grade dark) ---------- */
    --surface-0:  #000308;
    --surface-1:  #06101f;
    --surface-2:  rgba(14, 28, 52, 0.72);
    --surface-3:  rgba(22, 40, 70, 0.88);
    --surface-4:  rgba(28, 50, 86, 0.94);

    /* ---------- Ice spectrum ---------- */
    --ice-50:   #eaf8ff;
    --ice-100:  #cdeefc;
    --ice-200:  #a8ecff;
    --ice-300:  #7ad8f5;
    --ice-400:  #4dd9f4;
    --ice-500:  #00c8ef;
    --ice-600:  #009ec4;
    --ice-700:  #006d8a;
    --ice-800:  #003e54;

    /* ---------- Gold (achievement only) ---------- */
    --gold-200: #fff07a;
    --gold-300: #ffe48a;
    --gold-500: #ffd60a;
    --gold-600: #e6bd00;
    --gold-700: #c79a00;

    /* ---------- Medal podium ---------- */
    --silver-300: #eef3f9;
    --silver-500: #d9e2ec;
    --silver-700: #94a3b8;
    --bronze-300: #f0b074;
    --bronze-500: #d4863a;
    --bronze-700: #8a5520;

    /* ---------- Semantic ---------- */
    --success-400: #4ade80;
    --success-500: #22c55e;
    --warn-400:    #fbbf24;
    --warn-500:    #f59e0b;
    --error-400:   #f87171;
    --error-500:   #ef4444;

    /* ---------- Text (Apple-style neutral scale on dark) ---------- */
    --text-primary:    rgba(255, 255, 255, 0.96);
    --text-secondary:  rgba(255, 255, 255, 0.66);
    --text-tertiary:   rgba(255, 255, 255, 0.40);
    --text-quaternary: rgba(255, 255, 255, 0.22);
    --text-ice:        var(--ice-300);
    --text-gold:       var(--gold-300);

    /* ---------- Hairlines (true Apple separators) ---------- */
    --hairline:     rgba(255, 255, 255, 0.08);
    --hairline-hi:  rgba(255, 255, 255, 0.14);
    --hairline-strong: rgba(255, 255, 255, 0.22);
    --hairline-ice: rgba(0, 200, 239, 0.22);
    --hairline-ice-hi: rgba(0, 200, 239, 0.38);
    --hairline-gold: rgba(255, 214, 10, 0.28);
    --hairline-error: rgba(239, 68, 68, 0.32);

    /* ---------- Type scale ---------- */
    --t-display:   clamp(2.5rem, 5vw + 1rem, 4.25rem);
    --t-title-1:   clamp(1.75rem, 2vw + 1rem, 2.5rem);
    --t-title-2:   1.5rem;
    --t-title-3:   1.25rem;
    --t-headline:  1.0625rem;
    --t-body:      1rem;
    --t-callout:   0.9375rem;
    --t-subhead:   0.875rem;
    --t-caption:   0.8125rem;
    --t-micro:     0.6875rem;

    /* ---------- Type tracking (Apple optical) ---------- */
    --track-tight:  -0.022em;
    --track-snug:   -0.012em;
    --track-normal: 0;
    --track-wide:   0.06em;
    --track-wider:  0.12em;
    --track-widest: 0.18em;

    /* ---------- Spacing (4pt grid) ---------- */
    --s-0:   0;
    --s-1:   4px;
    --s-2:   8px;
    --s-3:   12px;
    --s-4:   16px;
    --s-5:   20px;
    --s-6:   24px;
    --s-7:   28px;
    --s-8:   32px;
    --s-10:  40px;
    --s-12:  48px;
    --s-14:  56px;
    --s-16:  64px;
    --s-20:  80px;
    --s-24:  96px;

    /* ---------- Radii (Apple curvature) ---------- */
    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-2xl:  36px;
    --r-full: 999px;

    /* ---------- Elevation ---------- */
    --elev-0: none;
    --elev-1: 0 1px 0 var(--hairline-hi) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.55);
    --elev-2: 0 1px 0 var(--hairline-hi) inset, 0 18px 48px -12px rgba(0, 0, 0, 0.65);
    --elev-3: 0 1px 0 var(--hairline-hi) inset, 0 32px 80px -16px rgba(0, 0, 0, 0.75);
    --elev-glow-ice:  0 0 0 1px var(--hairline-ice) inset, 0 12px 40px -8px rgba(0, 200, 239, 0.28);
    --elev-glow-gold: 0 0 0 1px var(--hairline-gold) inset, 0 16px 48px -10px rgba(255, 214, 10, 0.22);
    --elev-glow-error:0 0 0 1px var(--hairline-error) inset, 0 14px 40px -10px rgba(239, 68, 68, 0.24);
    --focus-ring: 0 0 0 3px rgba(0, 200, 239, 0.32);

    /* ---------- Motion (Apple springs) ---------- */
    --ease-out-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.6, 1);
    --ease-in:         cubic-bezier(0.4, 0, 1, 1);
    --ease-back:       cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --dur-instant: 90ms;
    --dur-fast:    180ms;
    --dur-base:    280ms;
    --dur-mid:     420ms;
    --dur-slow:    560ms;
    --dur-page:    680ms;

    /* ---------- Layout ---------- */
    --container-max: 1280px;
    --container-narrow: 960px;
    --container-pad: clamp(16px, 4vw, 32px);

    /* ---------- Z-index scale ---------- */
    --z-base:     0;
    --z-raised:   10;
    --z-sticky:   100;
    --z-overlay:  1000;
    --z-modal:    10000;
    --z-toast:    15000;
    --z-loader:   20000;

    /* ---------- Glass blur ---------- */
    --blur-sm: blur(12px) saturate(140%);
    --blur-md: blur(24px) saturate(160%);
    --blur-lg: blur(40px) saturate(180%);

    /* ---------- Brand fonts ---------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---------- Legacy compatibility (mapped to new tokens) ---------- */
    --bg-void:     var(--surface-0);
    --bg-deep:     var(--surface-1);
    --bg-card:     var(--surface-2);
    --bg-raised:   var(--surface-3);
    --ice:         var(--ice-500);
    --ice-bright:  var(--ice-400);
    --ice-pale:    var(--ice-200);
    --gold:        var(--gold-500);
    --gold-pale:   var(--gold-200);
    --silver:      var(--silver-500);
    --bronze:      var(--bronze-500);
    --text:        var(--text-secondary);
    --text-bright: var(--text-primary);
    --text-muted:  var(--text-tertiary);
    --error:       var(--error-500);
    --error-border:var(--error-500);
    --b-ice:       var(--hairline-ice);
    --b-ice-hi:    var(--hairline-ice-hi);
    --b-gold:      var(--hairline-gold);
    --b-silver:    rgba(217, 226, 236, 0.32);
    --b-bronze:    rgba(212, 134, 58, 0.32);
    --sh-card:     var(--elev-1);
    --sh-gold:     var(--elev-glow-gold);
    --ease:        var(--dur-base) var(--ease-out-spring);

    /* hex-prefixed legacy aliases used in HTML inline styles */
    --hex-bg-darkest: var(--surface-0);
    --hex-bg-dark:    var(--surface-1);
    --hex-bg-card:    var(--surface-2);
    --hex-gold:       var(--ice-500);
    --hex-gold-light: var(--text-primary);
    --hex-gold-dark:  var(--ice-700);
    --hex-teal:       var(--ice-400);
    --hex-text:       var(--text-primary);
    --hex-text-sec:   var(--text-tertiary);
    --hex-red:        var(--error-500);
    --hex-red-border: var(--error-500);
}

/* ============================================================
   Base reset + body baseline
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Account for notches and home indicators */
    height: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--t-body);
    line-height: 1.45;
    font-weight: 400;
    color: var(--text-primary);
    background: var(--surface-0);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11", "kern" 1;
    /* respect safe areas */
    padding-bottom: env(safe-area-inset-bottom);
}

::selection {
    background: rgba(0, 200, 239, 0.28);
    color: var(--text-primary);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a {
    color: var(--ice-300);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ice-200); }

img, svg { display: block; max-width: 100%; }

/* ============================================================
   Ambient background — refined aurora + minimal snow
   ============================================================ */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 140, 210, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 90% 110%, rgba(70, 30, 140, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 50%, var(--surface-0) 100%);
    animation: aurora-drift 90s ease-in-out infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(0, 200, 239, 0.05) 0%, transparent 70%);
}

@keyframes aurora-drift {
    0%, 100% { opacity: 1; transform: translate3d(0, 0, 0); }
    50%      { opacity: 0.82; transform: translate3d(0, 1.5%, 0); }
}

/* Minimal snow layer — at most 5 flakes */
.snow-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.bg-snowflake {
    position: absolute;
    top: -6%;
    user-select: none;
    color: rgba(255, 255, 255, 0.85);
    filter: blur(0.5px);
    animation: snow-fall linear infinite;
}

@keyframes snow-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg);   opacity: 0; }
    10%  { opacity: var(--snow-opacity, 0.14); }
    90%  { opacity: var(--snow-opacity, 0.14); }
    100% { transform: translate3d(20px, 110vh, 0) rotate(180deg); opacity: 0; }
}

/* ============================================================
   App shell — content above ambient layers
   ============================================================ */

.app-shell, main, .container {
    position: relative;
    z-index: 2;
}

/* ============================================================
   Buttons (primary / secondary / icon)
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-5);
    font-family: var(--font-display);
    font-size: var(--t-callout);
    font-weight: 600;
    letter-spacing: var(--track-snug);
    border-radius: var(--r-full);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--dur-fast) var(--ease-out-spring),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    will-change: transform;
}

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: scale(0.97); }

.btn--primary {
    background: linear-gradient(180deg, var(--ice-400) 0%, var(--ice-600) 100%);
    color: #001823;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -10px rgba(0, 200, 239, 0.55);
}
.btn--primary:hover { filter: brightness(1.06); }

.btn--secondary {
    background: var(--surface-2);
    color: var(--text-primary);
    border-color: var(--hairline-hi);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
}
.btn--secondary:hover { border-color: var(--hairline-strong); background: var(--surface-3); }

.btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--hairline);
}
.btn--ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--hairline-hi); }

.btn--destructive {
    background: var(--surface-2);
    color: var(--error-400);
    border-color: var(--hairline-error);
}
.btn--destructive:hover { background: rgba(239, 68, 68, 0.12); }

.btn--icon {
    min-height: 44px;
    width: 44px;
    padding: 0;
    border-radius: var(--r-full);
}

/* ============================================================
   Card primitive
   ============================================================ */

.card {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xl);
    backdrop-filter: var(--blur-md);
    -webkit-backdrop-filter: var(--blur-md);
    box-shadow: var(--elev-1);
    transition: transform var(--dur-base) var(--ease-out-spring),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .card--interactive:hover {
        transform: translateY(-4px);
        border-color: var(--hairline-hi);
        box-shadow: var(--elev-2);
    }
}

/* ============================================================
   Form inputs (Apple "filled" style)
   ============================================================ */

.input, .select {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--s-4);
    font-size: var(--t-body);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover { border-color: var(--hairline-hi); }
.input:focus, .select:focus {
    outline: none;
    border-color: var(--ice-500);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: var(--focus-ring);
}

.select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%237ad8f5' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    padding-right: var(--s-10);
    cursor: pointer;
}

/* ============================================================
   Hairline divider
   ============================================================ */

.divider { height: 1px; background: var(--hairline); border: 0; }

/* ============================================================
   Custom scrollbar — Apple-restrained
   ============================================================ */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--hairline-hi) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--hairline-hi);
    border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--hairline-strong); }

/* ============================================================
   Reduced motion
   ============================================================ */

@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;
    }
    .snow-layer, body::before, body::after { animation: none !important; }
}

/* ============================================================
   Mobile reductions (perf + clarity)
   ============================================================ */

@media (max-width: 640px) {
    body::after { opacity: 0.6; }
}