/* ===== ArcX Swish - Unified Design System ===== */
/* Based on frontend-design + ui-ux-pro-max skills */

/* Google Fonts removed — fonts are self-hosted in /static/fonts/ to avoid GFW blocking */

:root {
    /* ── Colors - Premium Sports Tech ── */
    --black: #000000;
    --black-rich: #050505;
    --gray-900: #1d1d1f;
    --gray-800: #2c2c2e;
    --gray-700: #3a3a3c;
    --gray-600: #48484a;
    --gray-500: #636366;
    --gray-400: #86868b;
    --gray-300: #aeaeb2;
    --white: #f5f5f7;
    --white-pure: #ffffff;

    /* ── Brand Accents - Single source of truth ── */
    --blue-primary:  #0066cc;   /* Apple CTA blue */
    --blue-hover:   #0071e3;
    --blue-light:    #2997ff;
    --teal:          #64d2ff;
    --purple:        #bf5af2;
    --orange-accent: #ff6d00;
    --green-accent:  #30d158;
    --red:           #ff453a;

    /* ── Brand Gradient - Unified across all pages ── */
    --brand-gradient:       linear-gradient(135deg, #64d2ff 0%, #0a84ff 50%, #bf5af2 100%);
    --brand-gradient-short: linear-gradient(135deg, #64d2ff, #00f2fe);

    /* ── Aliases for sub-pages (admin / dashboard / panel) ── */
    --bg:       var(--black);
    --bg-2:     #0a0a0a;
    --bg-3:     #111111;
    --bg-card:  rgba(22,22,24,0.9);
    --text:     var(--white);
    --text-2:   var(--gray-400);
    --text-3:   var(--gray-600);
    --accent:   var(--blue-light);
    --green:    var(--green-accent);
    --orange:   var(--orange-accent);

    /* ── Typography ── */
    --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;

    /* Apple Typography Scale */
    --fs-hero:    clamp(56px, 11vw, 96px);
    --fs-title:   clamp(32px, 6vw, 56px);
    --fs-subtitle: clamp(18px, 3vw, 28px);
    --fs-body:    18px;
    --fs-cta:     17px;
    --fs-caption: 15px;
    --fs-small:   12px;

    /* ── Letter Spacing ── */
    --ls-tight:   -0.06em;
    --ls-heading: -0.035em;
    --ls-body:    -0.03em;
    --ls-wide:     0.12em;

    /* ── Easing ── */
    --ease-smooth:    cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Spacing ── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* ── Borders ── */
    --border:       rgba(255,255,255,0.08);
    --border-light: rgba(255,255,255,0.15);
    --radius-sm:   12px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-full: 980px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-display);
    background: var(--black);
    color: var(--white);
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.022em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1;
    overflow-x: hidden;
}

/* Chinese-specific letter-spacing */
:lang(zh), :lang(zh-CN), :lang(zh-TW) {
    letter-spacing: 0;
}

/* ── Common Elements ── */
a { color: var(--blue-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--white); }
img { max-width: 100%; height: auto; }

/* ── Buttons ── */
.btn {
    font-family: var(--font-display);
    font-size: 17px;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s var(--ease-smooth);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    cursor: pointer;
}

.btn-blue {
    background: var(--blue-primary);
    color: var(--white-pure);
    box-shadow: 0 4px 24px rgba(0,113,227,0.3);
}
.btn-blue:hover {
    background: var(--blue-hover);
    transform: scale(1.04) translateY(-1px);
    box-shadow: 0 8px 40px rgba(0,113,227,0.5);
    color: var(--white-pure);
}
.btn-blue:active {
    transform: scale(0.98);
    box-shadow: 0 2px 12px rgba(0,113,227,0.3);
}

/* ── Back Link ── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue-light);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: var(--space-xl);
    transition: all 0.2s;
}
.back-link:hover {
    color: var(--white);
    transform: translateX(-4px);
}

/* ── Legal / Content Pages ── */
.page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 80px 24px;
}

.page-container h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--orange-accent), #ff9500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-container h2 {
    font-size: var(--fs-title, 1.5rem);
    font-weight: 600;
    letter-spacing: var(--ls-heading, -0.025em);
    margin: 36px 0 16px;
    color: var(--white);
}

.page-container p {
    color: var(--gray-400);
    margin-bottom: 16px;
    line-height: 1.7;
    font-size: var(--fs-body, 18px);
    font-weight: 300;
    letter-spacing: var(--ls-body, -0.03em);
}

.page-container ul {
    color: var(--gray-400);
    margin: 16px 0 16px 24px;
    line-height: 1.7;
}

.page-container li {
    margin-bottom: 8px;
}

/* ── Focus states ── */
*:focus-visible {
    outline: 2px solid var(--blue-light);
    outline-offset: 2px;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Touch targets ── */
@media (pointer: coarse) {
    .btn, button, a { min-height: 44px; }
}

/* ── Brand gradient text helper ── */
.brand-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }