/*
 * GDQX global theme
 *
 * Theme selection:
 *   <html gdqx-theme="light">
 *   <html gdqx-theme="dark">
 *
 * Font sizes use rem directly. Theme-dependent values use CSS variables.
 */


/* ==================== Shared foundation ==================== */

:root {
  color-scheme: light;

  /* Font families */
  --gdqx-font-family:
    "Microsoft YaHei",
    "PingFang SC",
    "HarmonyOS Sans SC",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --gdqx-font-family-mono:
    Consolas,
    "SFMono-Regular",
    Menlo,
    monospace;

  /* Semantic typography: weight size / line-height */
  --gdqx-text-title: 600 1.25rem / 1.4;
  --gdqx-text-heading: 600 1rem / 1.45;
  --gdqx-text-subheading: 500 0.875rem / 1.5;
  --gdqx-text-emphasis: 700 1rem / 1.5;
  --gdqx-text-body: 400 0.875rem / 1.6;
  --gdqx-text-tips: 400 0.8125rem / 1.4;
  --gdqx-text-label: 500 0.875rem / 1.4;

  /* Spacing */
  --gdqx-space-0: 0;
  --gdqx-space-1: 0.125rem;
  --gdqx-space-2: 0.25rem;
  --gdqx-space-3: 0.5rem;
  --gdqx-space-4: 0.75rem;
  --gdqx-space-5: 1rem;
  --gdqx-space-6: 1.5rem;
  --gdqx-space-7: 2rem;
  --gdqx-space-8: 2.5rem;

  /* Radius */
  --gdqx-radius-none: 0;
  --gdqx-radius-xs: 0.125rem;
  --gdqx-radius-sm: 0.25rem;
  --gdqx-radius-md: 0.5rem;
  --gdqx-radius-lg: 0.75rem;
  --gdqx-radius-xl: 1rem;
  --gdqx-radius-pill: 9999px;
  --gdqx-radius-circle: 50%;

  /* Border width */
  --gdqx-border-width-0: 0;
  --gdqx-border-width-1: 1px;
  --gdqx-border-width-2: 2px;

  /* Control and icon sizes */
  --gdqx-control-height-sm: 1.875rem;
  --gdqx-control-height-md: 2.25rem;
  --gdqx-control-height-lg: 2.75rem;

  --gdqx-icon-size-sm: 1rem;
  --gdqx-icon-size-md: 1.25rem;
  --gdqx-icon-size-lg: 1.5rem;
  --gdqx-icon-size-xl: 2rem;

  /* Motion */
  --gdqx-motion-duration-fast: 120ms;
  --gdqx-motion-duration-normal: 200ms;
  --gdqx-motion-duration-slow: 320ms;
  --gdqx-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Common title */
  --gdqx-title-font: var(--gdqx-text-title);
  --gdqx-title-color: var(--gdqx-text-color-primary);
  --gdqx-title-gap: var(--gdqx-space-3);
  --gdqx-title-align: center;

  /* Common block */
  --gdqx-block-background: var(--gdqx-color-surface);
  --gdqx-block-color: var(--gdqx-text-color-primary);
  --gdqx-block-border:
    var(--gdqx-border-width-1)
    solid
    var(--gdqx-border-color-subtle);
  --gdqx-block-radius: var(--gdqx-radius-md);
  --gdqx-block-shadow: var(--gdqx-shadow-none);
  --gdqx-block-padding: var(--gdqx-space-5);
  --gdqx-block-gap: var(--gdqx-space-4);
  --gdqx-block-title-font: var(--gdqx-text-heading);
  --gdqx-block-title-color: var(--gdqx-text-color-primary);
  --gdqx-block-title-background: var(--gdqx-color-primary-subtle);

  /* Time control */
  --gdqx-time-control-background: var(--gdqx-color-surface);
  --gdqx-time-control-background-opacity: 1;

  /* Common table */
  --gdqx-table-font: var(--gdqx-text-body);
  --gdqx-table-color: var(--gdqx-text-color-primary);
  --gdqx-table-background: var(--gdqx-color-surface);
  --gdqx-table-border-color: var(--gdqx-border-color-subtle);
  --gdqx-table-cell-padding:
    var(--gdqx-space-3)
    var(--gdqx-space-4);
  --gdqx-table-header-font: var(--gdqx-text-label);
  --gdqx-table-header-color: var(--gdqx-text-color-primary);
  --gdqx-table-header-background: var(--gdqx-color-primary-subtle);

  /* Common banner */
  --gdqx-banner-font: var(--gdqx-text-heading);
  --gdqx-banner-color: var(--gdqx-text-color-primary);
  --gdqx-banner-background: var(--gdqx-color-primary-subtle);
  --gdqx-banner-border:
    var(--gdqx-border-width-1)
    solid
    var(--gdqx-border-color-subtle);
  --gdqx-banner-radius: var(--gdqx-radius-md);
  --gdqx-banner-padding:
    var(--gdqx-space-4)
    var(--gdqx-space-5);
  --gdqx-banner-gap: var(--gdqx-space-3);

  /* Picker */
  --gdqx-picker-height: 13.75rem;
  --gdqx-picker-background: var(--gdqx-color-surface);
  --gdqx-picker-toolbar-background: var(--gdqx-color-primary);
  --gdqx-picker-toolbar-color: var(--gdqx-text-color-inverse);
  --gdqx-picker-option-font: var(--gdqx-text-body);
  --gdqx-picker-option-color: var(--gdqx-text-color-secondary);
  --gdqx-picker-option-font-selected: var(--gdqx-text-emphasis);
  --gdqx-picker-option-color-selected: var(--gdqx-text-color-primary);
  --gdqx-picker-option-icon-size: var(--gdqx-icon-size-sm);
  --gdqx-picker-option-icon-color: var(--gdqx-color-icon-brand);
  --gdqx-picker-highlight-background: var(--gdqx-color-primary-subtle);
  --gdqx-picker-highlight-radius: var(--gdqx-radius-md);
  --gdqx-picker-trigger-height: var(--gdqx-control-height-sm);
  --gdqx-picker-trigger-font: var(--gdqx-text-label);
  --gdqx-picker-trigger-border-width: var(--gdqx-border-width-1);
  --gdqx-picker-trigger-border-color: currentColor;
  --gdqx-picker-trigger-radius: var(--gdqx-radius-pill);

  /* Swiper */
  --gdqx-swiper-navigation-color: var(--gdqx-color-primary);
  --gdqx-swiper-navigation-size: var(--gdqx-icon-size-lg);
  --gdqx-swiper-navigation-background: var(--gdqx-color-surface-elevated);
  --gdqx-swiper-navigation-radius: var(--gdqx-radius-circle);
  --gdqx-swiper-pagination-color: var(--gdqx-color-primary);
  --gdqx-swiper-pagination-color-inactive: var(--gdqx-border-color-strong);
  --gdqx-swiper-pagination-size: 0.5rem;
  --gdqx-swiper-pagination-gap: var(--gdqx-space-2);
  --gdqx-swiper-slide-gap: var(--gdqx-space-4);
}


/* ==================== Light theme ==================== */

:root,
[gdqx-theme="light"] {
  color-scheme: light;

  /* Brand */
  --gdqx-color-primary: #365c9d;
  --gdqx-color-primary-hover: #2f528d;
  --gdqx-color-primary-active: #284777;
  --gdqx-color-primary-subtle: rgb(54 92 157 / 10%);
  --gdqx-color-secondary: #5b82c7;
  --gdqx-color-secondary-subtle: rgb(91 130 199 / 12%);
  --gdqx-color-accent: #e79b57;
  --gdqx-color-accent-hover: #d98943;
  --gdqx-color-accent-subtle: rgb(231 155 87 / 12%);

  /* Text */
  --gdqx-topic-color: #ffffff;
  --gdqx-text-color-primary: #1f2937;
  --gdqx-text-color-secondary: #4b5563;
  --gdqx-text-color-tertiary: #8a94a3;
  --gdqx-text-color-disabled: #b7bec8;
  --gdqx-text-color-inverse: #ffffff;
  --gdqx-text-color-link: var(--gdqx-color-primary);
  --gdqx-text-color-link-hover: var(--gdqx-color-primary-hover);

  /* Background */
  --gdqx-color-background: #f5f7fa;
  --gdqx-color-surface: #ffffff;
  --gdqx-color-surface-subtle: #f2f5f9;
  --gdqx-color-surface-elevated: #ffffff;
  --gdqx-color-surface-inverse: #1f2937;
  --gdqx-color-overlay: rgb(15 23 42 / 45%);

  /* Border */
  --gdqx-border-color-subtle: #e5eaf0;
  --gdqx-border-color: #d6dde6;
  --gdqx-border-color-strong: #aeb8c5;
  --gdqx-border-color-focus: var(--gdqx-color-primary);
  --gdqx-color-divider: #e9edf2;

  /* Icon */
  --gdqx-color-icon-primary: var(--gdqx-text-color-primary);
  --gdqx-color-icon-secondary: var(--gdqx-text-color-secondary);
  --gdqx-color-icon-tertiary: var(--gdqx-text-color-tertiary);
  --gdqx-color-icon-disabled: var(--gdqx-text-color-disabled);
  --gdqx-color-icon-inverse: var(--gdqx-text-color-inverse);
  --gdqx-color-icon-brand: var(--gdqx-color-primary);

  /* Status */
  --gdqx-color-info: #2f6fed;
  --gdqx-color-info-subtle: #eef4ff;
  --gdqx-color-info-text: #1f4fa8;
  --gdqx-color-success: #16865c;
  --gdqx-color-success-subtle: #edf8f3;
  --gdqx-color-success-text: #0f6846;
  --gdqx-color-warning: #d99a00;
  --gdqx-color-warning-subtle: #fff8e5;
  --gdqx-color-warning-text: #805b00;
  --gdqx-color-danger: #d9363e;
  --gdqx-color-danger-subtle: #fff0f1;
  --gdqx-color-danger-text: #a5262d;

  /* Shadow */
  --gdqx-shadow-none: none;
  --gdqx-shadow-sm: 0 1px 2px rgb(15 23 42 / 8%);
  --gdqx-shadow-md: 0 4px 12px rgb(15 23 42 / 10%);
  --gdqx-shadow-lg: 0 12px 32px rgb(15 23 42 / 14%);
  --gdqx-shadow-overlay: 0 20px 48px rgb(15 23 42 / 18%);
  --gdqx-shadow-focus: 0 0 0 3px rgb(54 92 157 / 24%);
}


/* ==================== Dark theme ==================== */

[gdqx-theme="dark"] {
  color-scheme: dark;

  /* Brand */
  --gdqx-color-primary: #32d6e6;
  --gdqx-color-primary-hover: #5ce1ed;
  --gdqx-color-primary-active: #20b9ca;
  --gdqx-color-primary-subtle: rgb(50 214 230 / 14%);
  --gdqx-color-secondary: #79a9f2;
  --gdqx-color-secondary-subtle: rgb(121 169 242 / 16%);
  --gdqx-color-accent: #f2ad6d;
  --gdqx-color-accent-hover: #ffc087;
  --gdqx-color-accent-subtle: rgb(242 173 109 / 16%);

  /* Text */
  --gdqx-topic-color: #ffffff;
  --gdqx-text-color-primary: #e8f7f8;
  --gdqx-text-color-secondary: #bfd9dc;
  --gdqx-text-color-tertiary: #8faeb2;
  --gdqx-text-color-disabled: #607b80;
  --gdqx-text-color-inverse: #07172a;
  --gdqx-text-color-link: var(--gdqx-color-primary);
  --gdqx-text-color-link-hover: var(--gdqx-color-primary-hover);

  /* Background */
  --gdqx-color-background: #07172a;
  --gdqx-color-surface: #0b223c;
  --gdqx-color-surface-subtle: #102b49;
  --gdqx-color-surface-elevated: #153453;
  --gdqx-color-surface-inverse: #e8f7f8;
  --gdqx-color-overlay: rgb(0 7 18 / 68%);

  /* Border */
  --gdqx-border-color-subtle: #1c3b58;
  --gdqx-border-color: #2a506d;
  --gdqx-border-color-strong: #4d7289;
  --gdqx-border-color-focus: var(--gdqx-color-primary);
  --gdqx-color-divider: #183752;

  /* Icon */
  --gdqx-color-icon-primary: var(--gdqx-text-color-primary);
  --gdqx-color-icon-secondary: var(--gdqx-text-color-secondary);
  --gdqx-color-icon-tertiary: var(--gdqx-text-color-tertiary);
  --gdqx-color-icon-disabled: var(--gdqx-text-color-disabled);
  --gdqx-color-icon-inverse: var(--gdqx-text-color-inverse);
  --gdqx-color-icon-brand: var(--gdqx-color-primary);

  /* Status */
  --gdqx-color-info: #73a8ff;
  --gdqx-color-info-subtle: rgb(115 168 255 / 16%);
  --gdqx-color-info-text: #b9d3ff;
  --gdqx-color-success: #4fd3a1;
  --gdqx-color-success-subtle: rgb(79 211 161 / 15%);
  --gdqx-color-success-text: #a9edd3;
  --gdqx-color-warning: #f4c451;
  --gdqx-color-warning-subtle: rgb(244 196 81 / 16%);
  --gdqx-color-warning-text: #ffe09a;
  --gdqx-color-danger: #ff737b;
  --gdqx-color-danger-subtle: rgb(255 115 123 / 16%);
  --gdqx-color-danger-text: #ffb9bd;

  /* Shadow */
  --gdqx-shadow-none: none;
  --gdqx-shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
  --gdqx-shadow-md: 0 4px 12px rgb(0 0 0 / 30%);
  --gdqx-shadow-lg: 0 12px 32px rgb(0 0 0 / 38%);
  --gdqx-shadow-overlay: 0 20px 48px rgb(0 0 0 / 48%);
  --gdqx-shadow-focus: 0 0 0 3px rgb(50 214 230 / 28%);
}


/* ==================== Global component classes ==================== */

.gdqx-root {
  box-sizing: border-box;
  color: var(--gdqx-text-color-primary);
  font-family: var(--gdqx-font-family);
  font-size: 1rem;
  line-height: 1.5;
}

.gdqx-title {
  color: var(--gdqx-title-color);
  font: var(--gdqx-title-font) var(--gdqx-font-family);
  text-align: var(--gdqx-title-align);
}

.gdqx-block {
  color: var(--gdqx-block-color);
  background: var(--gdqx-block-background);
  border: var(--gdqx-block-border);
  border-radius: var(--gdqx-block-radius);
  box-shadow: var(--gdqx-block-shadow);
}

.gdqx-block-title {
  color: var(--gdqx-block-title-color);
  background: var(--gdqx-block-title-background);
  font: var(--gdqx-block-title-font) var(--gdqx-font-family);
}

.gdqx-banner {
  display: flex;
  gap: var(--gdqx-banner-gap);
  align-items: center;
  color: var(--gdqx-banner-color);
  background: var(--gdqx-banner-background);
  border: var(--gdqx-banner-border);
  border-radius: var(--gdqx-banner-radius);
  padding: var(--gdqx-banner-padding);
  font: var(--gdqx-banner-font) var(--gdqx-font-family);
}

.gdqx-table {
  width: 100%;
  color: var(--gdqx-table-color);
  background: var(--gdqx-table-background);
  border-collapse: collapse;
  font: var(--gdqx-table-font) var(--gdqx-font-family);
}

.gdqx-table th,
.gdqx-table td {
  padding: var(--gdqx-table-cell-padding);
  border-bottom: var(--gdqx-border-width-1) solid var(--gdqx-table-border-color);
}

.gdqx-table th {
  color: var(--gdqx-table-header-color);
  background: var(--gdqx-table-header-background);
  font: var(--gdqx-table-header-font) var(--gdqx-font-family);
}


/* ==================== Content semantics ==================== */

.gdqx-content-normal {
  color: var(--gdqx-text-color-primary);
  font-weight: 400;
}

.gdqx-content-emphasize {
  color: var(--gdqx-text-color-primary);
  font-weight: 700;
}

.gdqx-content-tips {
  color: var(--gdqx-text-color-tertiary);
  font-weight: 400;
}

.gdqx-content-center {
  text-align: center;
}


/* ==================== Content sizes ==================== */

.gdqx-content-lg {
  font-size: 1rem;
  line-height: 1.5;
}

.gdqx-content-md {
  font-size: 0.875rem;
  line-height: 1.5;
}

.gdqx-content-sm {
  font-size: 0.8125rem;
  line-height: 1.4;
}