/*
 * Tsingke Website 2.0 design-system tokens.
 * Runtime source of truth: this file only.
 * Registered breakpoints (custom properties cannot be used in media queries):
 * compact = 37.5rem (600px), navigation = 56.25rem (900px).
 */

.tk-system {
  color-scheme: light;

  /* Reference colors */
  --tk-ref-white: #ffffff;
  --tk-ref-canvas: #f8f7f7;
  --tk-ref-paper: #ece8e3;
  --tk-ref-ink: #10213a;
  --tk-ref-muted: #526078;
  --tk-ref-line: #d8d1d3;
  --tk-ref-boundary: #7d7478;
  --tk-ref-wine: #7E2528;
  --tk-ref-wine-hover: #6B1D20;
  --tk-ref-wine-pressed: #5C1A1C;
  --tk-ref-wine-tint: #F5E8E9;
  --tk-ref-focus: #7E2528;
  --tk-ref-blue: #536D80;
  --tk-ref-blue-hover: #3E5261;
  --tk-ref-blue-pressed: #334854;
  --tk-ref-blue-tint: #EAEFF2;
  --tk-ref-green: #577466;
  --tk-ref-green-hover: #425C4F;
  --tk-ref-green-pressed: #354E43;
  --tk-ref-green-tint: #EDF2EE;
  --tk-ref-gold: #B8860B;
  --tk-ref-gold-hover: #8C6808;
  --tk-ref-gold-pressed: #6E5106;
  --tk-ref-gold-tint: #F8F1DF;
  --tk-ref-success: #2e624b;
  --tk-ref-warning: #785322;
  --tk-ref-error: #a33d4c;
  --tk-ref-overlay: rgb(16 33 58 / 40%);

  /* Semantic colors */
  --tk-color-canvas: var(--tk-ref-canvas);
  --tk-color-surface: var(--tk-ref-white);
  --tk-color-surface-muted: var(--tk-ref-paper);
  --tk-color-text: var(--tk-ref-ink);
  --tk-color-text-muted: var(--tk-ref-muted);
  --tk-color-border-subtle: var(--tk-ref-line);
  --tk-color-border: var(--tk-ref-boundary);
  --tk-color-action: var(--tk-ref-wine);
  --tk-color-action-hover: var(--tk-ref-wine-hover);
  --tk-color-action-pressed: var(--tk-ref-wine-pressed);
  --tk-color-action-text: var(--tk-ref-white);
  --tk-color-selected-surface: var(--tk-ref-wine-tint);
  --tk-color-selected-border: var(--tk-ref-wine);
  --tk-color-focus: var(--tk-ref-focus);
  --tk-color-focus-gap: var(--tk-ref-white);
  --tk-color-success: var(--tk-ref-success);
  --tk-color-warning: var(--tk-ref-warning);
  --tk-color-error: var(--tk-ref-error);
  --tk-color-info: var(--tk-ref-blue);
  --tk-color-info-hover: var(--tk-ref-blue-hover);
  --tk-color-info-pressed: var(--tk-ref-blue-pressed);
  --tk-color-info-surface: var(--tk-ref-blue-tint);
  --tk-color-method: var(--tk-ref-green);
  --tk-color-method-hover: var(--tk-ref-green-hover);
  --tk-color-method-pressed: var(--tk-ref-green-pressed);
  --tk-color-method-surface: var(--tk-ref-green-tint);
  --tk-color-highlight: var(--tk-ref-gold);
  --tk-color-highlight-hover: var(--tk-ref-gold-hover);
  --tk-color-highlight-pressed: var(--tk-ref-gold-pressed);
  --tk-color-highlight-surface: var(--tk-ref-gold-tint);
  --tk-color-progress-fill: var(--tk-ref-wine);
  --tk-color-progress-track: var(--tk-ref-paper);
  --tk-color-overlay: var(--tk-ref-overlay);

  /* Typography */
  --tk-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tk-font-display: "New York", Iowan Old Style, Songti SC, Georgia, serif;
  --tk-font-code: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --tk-size-1: 0.875rem;
  --tk-size-2: 1rem;
  --tk-size-3: 1.25rem;
  --tk-size-4: 1.5rem;
  --tk-size-5: 2rem;
  --tk-size-6: 2.5rem;
  --tk-size-7: 3rem;
  --tk-leading-tight: 1.2;
  --tk-leading-body: 1.6;
  --tk-leading-meta: 1.45;
  --tk-weight-regular: 400;
  --tk-weight-medium: 600;
  --tk-weight-bold: 700;
  --tk-type-meta-size: var(--tk-size-1);
  --tk-type-body-size: var(--tk-size-2);
  --tk-type-item-size: var(--tk-size-3);
  --tk-type-section-size: var(--tk-size-4);
  --tk-type-page-size: var(--tk-size-5);
  --tk-type-hero-size: var(--tk-size-5);

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

  /* Layout */
  --tk-layout-gutter: var(--tk-space-4);
  --tk-layout-max: 77.5rem;
  --tk-layout-prose: 42rem;
  --tk-layout-rail: 15.75rem;
  --tk-layout-drawer: min(22rem, calc(100vw - 2rem));

  /* Geometry and layers */
  --tk-radius-control: 0.625rem;
  --tk-radius-panel: 1rem;
  --tk-radius-pill: 999px;
  --tk-border-thin: 1px;
  --tk-border-strong: 2px;
  --tk-control-min-size: max(44px, 2.75rem);
  --tk-field-min-size: max(48px, 3rem);
  --tk-focus-width: 3px;
  --tk-focus-offset: 3px;
  --tk-focus-gap: 2px;
  --tk-shadow-raised: 0 0.25rem 1rem rgb(16 33 58 / 12%);
  --tk-shadow-drawer: 0 0.5rem 2rem rgb(16 33 58 / 24%);
  --tk-layer-base: 0;
  --tk-layer-sticky: 20;
  --tk-layer-popover: 30;
  --tk-layer-backdrop: 40;
  --tk-layer-drawer: 50;
  --tk-layer-skip: 100;

  /* Interaction and motion: the only runtime value source. */
  --tk-motion-duration-feedback: 100ms;
  --tk-motion-duration-reveal: 160ms;
  --tk-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --tk-motion-distance-reveal: 0.5rem;

  /* 3D scene tokens: fog, rim light, marble, metal, gate, LED, exposure, pixel ratio. */
  --tk-3d-fog-color: var(--tk-ref-canvas);
  --tk-3d-fog-density: 0.03;
  --tk-3d-rim-cyan: #E0FFFF;
  --tk-3d-rim-pink: #F0E6FF;
  --tk-3d-rim-intensity: 0.15;
  --tk-3d-marble-color: var(--tk-ref-paper);
  --tk-3d-marble-roughness: 0.25;
  --tk-3d-metal-color: #C0C0C5;
  --tk-3d-metal-roughness: 0.35;
  --tk-3d-gate-color: var(--tk-ref-wine);
  --tk-3d-gate-roughness: 0.35;
  --tk-3d-gate-metalness: 0.8;
  --tk-3d-led-color: #FFF8F0;
  --tk-3d-led-intensity: 0.3;
  --tk-3d-exposure: 1.0;
  --tk-3d-pixel-ratio: 1;

  /* Deliberate component aliases: shared state/shape only. */
  --tk-control-background: var(--tk-color-surface);
  --tk-control-border: var(--tk-color-border);
  --tk-control-active-background: var(--tk-color-action);
  --tk-control-active-text: var(--tk-color-action-text);
  --tk-panel-background: var(--tk-color-surface);
  --tk-panel-border: var(--tk-color-border-subtle);
  --tk-item-selected-background: var(--tk-color-selected-surface);
  --tk-item-selected-border: var(--tk-color-selected-border);
  --tk-reader-background: var(--tk-color-surface-muted);
}

@media (min-width: 37.5rem) {
  .tk-system {
    --tk-layout-gutter: var(--tk-space-5);
    --tk-type-hero-size: var(--tk-size-6);
  }
}

@media (min-width: 56.25rem) {
  .tk-system {
    --tk-layout-gutter: var(--tk-space-6);
    --tk-type-page-size: var(--tk-size-6);
    --tk-type-hero-size: var(--tk-size-7);
  }
}

@media (forced-colors: active) {
  .tk-system {
    --tk-color-canvas: Canvas;
    --tk-color-surface: Canvas;
    --tk-color-surface-muted: Canvas;
    --tk-color-text: CanvasText;
    --tk-color-text-muted: GrayText;
    --tk-color-border-subtle: CanvasText;
    --tk-color-border: CanvasText;
    --tk-color-action: LinkText;
    --tk-color-action-hover: LinkText;
    --tk-color-action-pressed: LinkText;
    --tk-color-action-text: CanvasText;
    --tk-color-selected-surface: Highlight;
    --tk-color-selected-border: Highlight;
    --tk-color-focus: Highlight;
    --tk-color-focus-gap: Canvas;
    --tk-color-success: CanvasText;
    --tk-color-warning: CanvasText;
    --tk-color-error: CanvasText;
    --tk-color-info: CanvasText;
    --tk-color-info-hover: CanvasText;
    --tk-color-info-pressed: CanvasText;
    --tk-color-info-surface: Canvas;
    --tk-color-method: CanvasText;
    --tk-color-method-hover: CanvasText;
    --tk-color-method-pressed: CanvasText;
    --tk-color-method-surface: Canvas;
    --tk-color-highlight: CanvasText;
    --tk-color-highlight-hover: CanvasText;
    --tk-color-highlight-pressed: CanvasText;
    --tk-color-highlight-surface: Canvas;
    --tk-color-progress-fill: Highlight;
    --tk-color-progress-track: Canvas;
    --tk-color-overlay: Canvas;
    --tk-motion-duration-feedback: 0ms;
    --tk-motion-duration-reveal: 0ms;
    --tk-motion-distance-reveal: 0rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-system {
    --tk-motion-duration-feedback: 0ms;
    --tk-motion-duration-reveal: 0ms;
    --tk-motion-distance-reveal: 0rem;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .tk-system {
    --tk-color-overlay: var(--tk-color-surface);
    --tk-shadow-raised: none;
    --tk-shadow-drawer: none;
  }
}