/*
 * WePlay 2026 — Official-site theme proposal v1.0
 * Based on supplied 2026WePlayLOGO新版.png and WePlay2026-KV.png.
 * Brand swatches are sampled; UI shades are derived, not official brand rules.
 *
 * 视觉：天空蓝 / 云白 / 深藏蓝；玫红与金黄作街机、周年主题点缀。
 * 建议面积：浅色 65–75%，蓝/藏蓝 20–25%，暖色 5–10%（非原图统计）。
 * 小圆角、清晰描边、硬偏移阴影；像素字体只适合短标签，正文保持易读。
 * 本文件仅定义变量，不自动改变现有组件。无外部依赖。
 *
 * Usage: <link rel="stylesheet" href="/styles/weplay-theme.css">
 * body {
 *   margin: 0;
 *   background: var(--weplay-bg-page);
 *   color: var(--weplay-text-primary);
 *   font-family: var(--weplay-font-body);
 *   font-size: var(--weplay-text-base);
 *   line-height: var(--weplay-leading-body);
 * }
 * .ticket-button {
 *   background: var(--weplay-action-primary-bg);
 *   color: var(--weplay-action-primary-text);
 *   border: var(--weplay-border-width-strong) solid var(--weplay-border-strong);
 *   border-radius: var(--weplay-radius-button);
 *   min-height: var(--weplay-control-height);
 *   padding: var(--weplay-space-3) var(--weplay-space-6);
 *   box-shadow: var(--weplay-shadow-arcade);
 * }
 * .ticket-button:hover { background: var(--weplay-action-primary-hover); }
 * .ticket-button:active { background: var(--weplay-action-primary-active); }
 * .ticket-button:disabled {
 *   background: var(--weplay-disabled-bg); color: var(--weplay-disabled-text);
 *   box-shadow: none; cursor: not-allowed;
 * }
 * .ticket-button:focus-visible {
 *   outline: var(--weplay-focus-width) solid var(--weplay-focus-color);
 *   outline-offset: var(--weplay-focus-offset);
 * }
 * .card { background: var(--weplay-bg-surface); border-radius: var(--weplay-radius-card); }
 * a { color: var(--weplay-link); text-decoration: underline; }
 * a:hover { color: var(--weplay-link-hover); }
 * 深色区域：<footer data-weplay-theme="dark">…</footer>
 * 嵌套浅色区域：data-weplay-theme="light"。
 * 原 LOGO 深色字应放在浅色区域；深色区域请使用浅色底板承载原 LOGO。
 * 照片/KV 上的文字必须使用独立实色底板，不能假设任意位置均可读。
 */

:root,
[data-weplay-theme='light'] {
  /* 01 · Sampled brand primitives — retain for artwork and decoration */
  --weplay-brand-navy: #0c1531;
  --weplay-brand-sky: #029ddf;
  --weplay-brand-cyan: #1794d0;
  --weplay-brand-blue: #2b58c2;
  --weplay-brand-pink: #e21f6a;
  --weplay-brand-yellow: #ffc30e;
  --weplay-brand-white: #ffffff;

  /* 02 · UI surfaces — derived from the bright sky in the KV */
  --weplay-bg-page: #f3faff;
  --weplay-bg-surface: #ffffff;
  --weplay-bg-partner-section: #f6f7fa;
  --weplay-bg-partner-tile: var(--weplay-brand-white);
  --weplay-bg-mobile-menu: color-mix(in srgb, var(--weplay-bg-surface) 82%, transparent);
  --weplay-mobile-menu-blur: 16px;
  --weplay-bg-subtle: #e7f4fc;
  --weplay-bg-elevated: #ffffff;
  --weplay-bg-inverse: #0c1531;
  --weplay-bg-selection: #ffe3ef;
  --weplay-text-selection: #0c1531;

  /* 03 · Text and links; bright brand cyan is decorative, not body text */
  --weplay-text-primary: #0c1531;
  --weplay-text-secondary: #394b68;
  --weplay-text-muted: #526580;
  --weplay-text-inverse: #ffffff;
  --weplay-link: #2054b5;
  --weplay-link-hover: #163e8d;

  /* 04 · Primary purchase / registration action; white label */
  --weplay-action-primary-bg: #ce155b;
  --weplay-action-primary-hover: #b5104d;
  --weplay-action-primary-active: #970d40;
  --weplay-action-primary-text: #ffffff;

  /* Secondary action; white label */
  --weplay-action-secondary-bg: #2b58c2;
  --weplay-action-secondary-hover: #234aa5;
  --weplay-action-secondary-active: #1b3b85;
  --weplay-action-secondary-text: #ffffff;

  /* Anniversary / spotlight badge; always use a dark label on yellow */
  --weplay-accent-bg: #ffc30e;
  --weplay-accent-hover: #efb300;
  --weplay-accent-text: #0c1531;
  --weplay-tag-bg: #ffe3ef;
  --weplay-tag-text: #a81049;
  --weplay-disabled-bg: #e0e7ef;
  --weplay-disabled-text: #526580;

  /* 05 · Borders and form controls */
  --weplay-border-subtle: #ccddeb; /* Decorative separators, not sole input outline */
  --weplay-border-control: #71859e;
  --weplay-border-strong: #0c1531;
  --weplay-input-bg: #ffffff;
  --weplay-input-text: #0c1531;
  --weplay-input-placeholder: #526580;
  --weplay-focus-color: #2054b5;
  --weplay-focus-width: 3px;
  --weplay-focus-offset: 3px;
  --weplay-border-width: 1px;
  --weplay-border-width-strong: 2px;

  /* 06 · Functional states — UI extensions, not sampled brand colors.
     Pair each foreground with its corresponding background; also use text/icons. */
  --weplay-success: #126448;
  --weplay-success-bg: #e4f6ed;
  --weplay-warning: #775000;
  --weplay-warning-bg: #fff3c4;
  --weplay-danger: #ae203b;
  --weplay-danger-bg: #ffe8ee;
  --weplay-info: #2054b5;
  --weplay-info-bg: #e7f0ff;

  /* 07 · Decorative treatments; avoid using brand gradients behind small text */
  --weplay-gradient-sky: linear-gradient(155deg, #ffffff 0%, #e7f6ff 48%, #a9defa 100%);
  --weplay-gradient-brand: linear-gradient(110deg, #e21f6a 0%, #2b58c2 55%, #029ddf 100%);
  --weplay-gradient-anniversary: linear-gradient(120deg, #ffe89a 0%, #ffc30e 65%, #ffaa42 100%);
  --weplay-overlay-scrim: rgb(12 21 49 / 65%);
  --weplay-shadow-card: 0 8px 24px rgb(12 21 49 / 9%);
  --weplay-shadow-elevated: 0 16px 40px rgb(12 21 49 / 16%);
  --weplay-shadow-arcade: 4px 4px 0 #0c1531;
  --weplay-shadow-accent: 4px 4px 0 #ffc30e;

  /* 08 · Typography — system stack, no remote font requests */
  --weplay-font-body:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei',
    'Noto Sans CJK SC', sans-serif;
  --weplay-font-display: var(--weplay-font-body);
  --weplay-font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --weplay-text-xs: 0.75rem;
  --weplay-text-sm: 0.875rem;
  --weplay-text-base: 1rem;
  --weplay-text-lg: 1.125rem;
  --weplay-text-xl: 1.5rem;
  --weplay-text-heading: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  --weplay-text-hero: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  --weplay-weight-body: 400;
  --weplay-weight-emphasis: 600;
  --weplay-weight-heading: 800;
  --weplay-leading-body: 1.7;
  --weplay-leading-heading: 1.2;
  --weplay-tracking-heading: -0.02em;

  /* 09 · Spacing, shape and layout */
  --weplay-space-1: 0.25rem;
  --weplay-space-2: 0.5rem;
  --weplay-space-3: 0.75rem;
  --weplay-space-4: 1rem;
  --weplay-space-5: 1.25rem;
  --weplay-space-6: 1.5rem;
  --weplay-space-8: 2rem;
  --weplay-space-10: 2.5rem;
  --weplay-space-12: 3rem;
  --weplay-space-16: 4rem;
  --weplay-space-24: 6rem;
  --weplay-radius-sm: 0.25rem;
  --weplay-radius-button: 0.375rem;
  --weplay-radius-card: 0.75rem;
  --weplay-radius-pill: 999px;
  --weplay-content-max: 80rem;
  --weplay-reading-max: 42rem;
  --weplay-page-gutter: clamp(1rem, 4vw, 3rem);
  --weplay-section-gap: clamp(3rem, 7vw, 6rem);
  --weplay-control-height: 2.75rem;
  --weplay-z-header: 100;
  --weplay-z-overlay: 200;
  --weplay-z-dialog: 300;
  --weplay-z-toast: 400;

  /* 10 · Motion — apply to specific properties, not transition: all */
  --weplay-duration-fast: 120ms;
  --weplay-duration-base: 200ms;
  --weplay-duration-slow: 360ms;
  --weplay-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --weplay-hover-lift: -2px;
}

/* Optional dark section: set on the section itself or on <html>.
   Dark palette is a web extension, not a second official KV palette. */
[data-weplay-theme='dark'] {
  --weplay-bg-page: #0c1531;
  --weplay-bg-surface: #142343;
  --weplay-bg-subtle: #192d50;
  --weplay-bg-elevated: #20385b;
  --weplay-bg-inverse: #ffffff;
  --weplay-bg-selection: #ffc30e;
  --weplay-text-selection: #0c1531;
  --weplay-text-primary: #f3faff;
  --weplay-text-secondary: #c8dcf0;
  --weplay-text-muted: #a6bed8;
  --weplay-text-inverse: #0c1531;
  --weplay-link: #76d6ff;
  --weplay-link-hover: #b2eaff;
  --weplay-tag-bg: #48213b;
  --weplay-tag-text: #ffadcf;
  --weplay-disabled-bg: #283b57;
  --weplay-disabled-text: #a6bed8;
  --weplay-border-subtle: #354b6c;
  --weplay-border-control: #829cb9;
  --weplay-border-strong: #a6bed8;
  --weplay-input-bg: #142343;
  --weplay-input-text: #f3faff;
  --weplay-input-placeholder: #a6bed8;
  --weplay-focus-color: #ffc30e;
  --weplay-success: #8ae2b6;
  --weplay-success-bg: #10392d;
  --weplay-warning: #ffe18b;
  --weplay-warning-bg: #433517;
  --weplay-danger: #ffb1c3;
  --weplay-danger-bg: #491e30;
  --weplay-info: #9dceff;
  --weplay-info-bg: #18345a;
  --weplay-gradient-sky: linear-gradient(155deg, #0c1531 0%, #142343 50%, #20385b 100%);
  --weplay-shadow-card: 0 8px 24px rgb(0 0 0 / 22%);
  --weplay-shadow-elevated: 0 16px 40px rgb(0 0 0 / 32%);
  --weplay-shadow-arcade: 4px 4px 0 #029ddf;
}

/* Respects OS motion preference for components consuming these tokens.
   Custom keyframe animations still need their own reduced-motion handling. */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-weplay-theme='light'],
  [data-weplay-theme='dark'] {
    --weplay-duration-fast: 0ms;
    --weplay-duration-base: 0ms;
    --weplay-duration-slow: 0ms;
    --weplay-hover-lift: 0px;
  }
}