/**
 * QMF token bridge + hsk-exam extensions
 */

@import url('/qmf/dist/tokens.css');

:root {
  /* ── Bridge: QMF tokens → names used across hsk-exam ───────
     QMF exposes --qmf-color-primary / --qmf-border-color. The exam UI
     historically referenced --qmf-accent-primary / --qmf-border which
     don't exist upstream, so it silently fell back to a stale teal.
     Map them here for a single, consistent brand identity. */
  --qmf-accent-primary: var(--qmf-color-primary, #4f46e5);
  --qmf-accent-primary-dark: var(--qmf-color-primary-dark, #3730a3);
  --qmf-border: var(--qmf-border-color, #e5e7eb);

  /* macOS-native flavored neutrals (cooler, lower-contrast chrome) */
  --hsk-surface: #ffffff;
  --hsk-surface-elevated: rgba(255, 255, 255, 0.72);
  --hsk-canvas: #f5f5f7;            /* Apple system gray background */
  --hsk-border: rgba(60, 60, 67, 0.12);
  --hsk-border-strong: rgba(60, 60, 67, 0.18);
  --hsk-text-primary: #1d1d1f;      /* Apple near-black */
  --hsk-text-secondary: #6e6e73;    /* Apple secondary label */
  --hsk-text-tertiary: #8e8e93;

  --hsk-radius-sm: 10px;
  --hsk-radius-md: 14px;
  --hsk-radius-lg: 18px;
  --hsk-radius-xl: 24px;

  /* Layered, soft native shadows */
  --hsk-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.05);
  --hsk-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.07);
  --hsk-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.12);

  --hsk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hsk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hsk-success: #34c759;           /* Apple green */
  --hsk-error: #ff3b30;             /* Apple red */
  --hsk-warning: #ff9500;           /* Apple orange */

  --hsk-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
    'Inter', 'Segoe UI', 'Noto Sans SC', system-ui, sans-serif;
}

.hsk-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.15em;
}

.hidden { display: none !important; }