/*
 * HAOLLA Design System OS v1.0
 * Semantic design tokens and opt-in primitives for a fast, consistent,
 * multilingual, accessibility-aware interface system.
 *
 * Contract:
 * - New UI should consume --ds-* tokens instead of inventing raw values.
 * - Existing legacy variables remain untouched for backward compatibility.
 * - Components in this file are opt-in to avoid visual regressions.
 */

:root {
  /* Typography */
  --ds-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif;
  --ds-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Noto Sans KR", "Noto Sans JP", "Noto Sans SC", sans-serif;
  --ds-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --ds-text-xs: .75rem;
  --ds-text-sm: .875rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.375rem;
  --ds-text-2xl: clamp(1.75rem, 2.5vw, 2.5rem);
  --ds-text-3xl: clamp(2.25rem, 4vw, 4rem);
  --ds-text-display: clamp(3rem, 6vw, 6rem);

  --ds-leading-tight: 1.04;
  --ds-leading-snug: 1.22;
  --ds-leading-body: 1.62;
  --ds-leading-relaxed: 1.72;
  --ds-tracking-tight: -.035em;
  --ds-tracking-display: -.05em;

  /* Semantic color roles: aliases preserve the current HAOLLA identity. */
  --ds-color-canvas: var(--bg, #07091a);
  --ds-color-canvas-raised: var(--bg2, #0b0f25);
  --ds-color-surface: var(--panel, rgba(19, 24, 54, .72));
  --ds-color-surface-strong: var(--panel2, rgba(12, 16, 38, .88));
  --ds-color-text: var(--text, #f7f9ff);
  --ds-color-text-muted: var(--muted, #9aa6c4);
  --ds-color-text-subtle: var(--muted2, #c5cee4);
  --ds-color-border: var(--line, rgba(173, 190, 255, .15));
  --ds-color-accent: var(--cyan, #78e4ef);
  --ds-color-positive: var(--mint, #bdf6c7);
  --ds-color-violet: var(--violet, #a995ff);
  --ds-color-pink: var(--pink, #ff91c8);
  --ds-color-gold: var(--gold, #f1e9a6);
  --ds-color-focus: #9cecf3;
  --ds-color-danger: #ff8c9f;

  /* 4-point spatial grid */
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;
  --ds-space-24: 96px;
  --ds-space-28: 112px;

  /* Geometry */
  --ds-radius-xs: 8px;
  --ds-radius-sm: 12px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 24px;
  --ds-radius-xl: 28px;
  --ds-radius-2xl: 36px;
  --ds-radius-pill: 999px;
  --ds-border-hairline: 1px;

  /* Elevation */
  --ds-shadow-1: 0 8px 24px rgba(0, 0, 0, .18);
  --ds-shadow-2: 0 18px 50px rgba(0, 0, 0, .24);
  --ds-shadow-3: 0 30px 90px rgba(0, 0, 0, .34);
  --ds-shadow-focus: 0 0 0 3px rgba(120, 228, 239, .22);
  --ds-blur-surface: 20px;

  /* Motion: fast, quiet, intentional. */
  --ds-duration-instant: 100ms;
  --ds-duration-fast: 180ms;
  --ds-duration-standard: 240ms;
  --ds-duration-slow: 420ms;
  --ds-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ds-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ds-ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Layout */
  --ds-container-wide: 1240px;
  --ds-container-reading: 760px;
  --ds-container-form: 680px;
  --ds-touch-min: 44px;
  --ds-header-height: 76px;
  --ds-safe-top: env(safe-area-inset-top, 0px);
  --ds-safe-right: env(safe-area-inset-right, 0px);
  --ds-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ds-safe-left: env(safe-area-inset-left, 0px);

  /* Layering */
  --ds-z-base: 0;
  --ds-z-sticky: 40;
  --ds-z-header: 50;
  --ds-z-dock: 70;
  --ds-z-modal: 100;
  --ds-z-toast: 120;
}

/* Opt-in primitives for new and migrated UI. */
.ds-container {
  width: min(var(--ds-container-wide), calc(100% - 40px));
  margin-inline: auto;
}

.ds-reading {
  width: min(var(--ds-container-reading), 100%);
}

.ds-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-stack-gap, var(--ds-space-6));
  min-width: 0;
}

.ds-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-cluster-gap, var(--ds-space-3));
  min-width: 0;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(var(--ds-grid-columns, 12), minmax(0, 1fr));
  gap: var(--ds-grid-gap, var(--ds-space-4));
  min-width: 0;
}

.ds-surface {
  color: var(--ds-color-text);
  border: var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-1);
  backdrop-filter: blur(var(--ds-blur-surface)) saturate(125%);
}

.ds-button {
  min-height: var(--ds-touch-min);
  padding-inline: var(--ds-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  border: var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  font: 800 var(--ds-text-sm)/1 var(--ds-font-sans);
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--ds-duration-fast) var(--ds-ease-standard), box-shadow var(--ds-duration-fast) var(--ds-ease-standard), background-color var(--ds-duration-fast) var(--ds-ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ds-button--primary {
  color: #101328;
  background: linear-gradient(110deg, #f4fff3, #dff9ff 38%, #e9dfff 72%, #ffe0ef);
  box-shadow: 0 12px 34px rgba(153, 187, 255, .15);
}

.ds-button--quiet {
  color: var(--ds-color-text);
  background: rgba(255, 255, 255, .025);
}

.ds-button:focus-visible,
.ds-focus:focus-visible {
  outline: 2px solid var(--ds-color-focus);
  outline-offset: 3px;
  box-shadow: var(--ds-shadow-focus);
}

@media (hover: hover) and (pointer: fine) {
  .ds-button:hover { transform: translateY(-1px); }
}

.ds-display {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-display);
  text-wrap: balance;
}

.ds-title {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-3xl);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-tight);
  text-wrap: balance;
}

.ds-body {
  margin: 0;
  font: 400 var(--ds-text-md)/var(--ds-leading-body) var(--ds-font-sans);
  color: var(--ds-color-text-muted);
}

.ds-caption {
  margin: 0;
  font: 700 var(--ds-text-xs)/1.45 var(--ds-font-sans);
  color: var(--ds-color-text-subtle);
  letter-spacing: .02em;
}

.ds-safe-bottom {
  padding-bottom: max(var(--ds-space-4), var(--ds-safe-bottom));
}

.ds-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html[lang="ja"] :where(.ds-display, .ds-title, .ds-body),
html[lang^="zh"] :where(.ds-display, .ds-title, .ds-body) {
  line-break: strict;
  word-break: normal;
}

@media (max-width: 760px) {
  .ds-container { width: min(100% - 28px, var(--ds-container-wide)); }
  .ds-display { letter-spacing: -.035em; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-button { transition-duration: 1ms; }
}