/*
 * HispanoQuest CP55 — Peça 00 / Design Tokens
 * Canonical semantic token layer. Do not add local magic numbers when a token exists.
 * Baseline: P0.12 + CP55-F01 Stitch normalization.
 */
:root {
  /* Brand / surfaces */
  --hq-blue: #13294B;
  --hq-blue-hover: #0F213D;
  --hq-blue-pressed: #0C1B33;
  --hq-terracotta: #C9472D;
  --hq-terracotta-hover: #B43F27;
  --hq-terracotta-pressed: #A33822;
  --hq-gold: #D4A03A;
  --hq-gold-deep: #9C7427;
  --hq-brown: #4A2E1B;
  --hq-olive: #596548;
  --hq-cream: #F5F1E8;
  --hq-paper: #FFFDF8;
  --hq-white: #FFFFFF;
  --hq-text: #1F1F1F;
  --hq-muted: #4B5563;
  --hq-muted-strong: #39465A;
  --hq-text-soft: #526070;
  --hq-disabled-text: #59616B;
  --hq-disabled-bg: #E8E2D8;
  --hq-gold-text: #755410;
  --hq-terracotta-text: #A33822;
  --hq-border: #DDD5C9;
  --hq-border-strong: #BEB4A6;

  /* Semantic feedback — never rely on color alone */
  --hq-success: #2F6B4F;
  --hq-success-soft: #E7F1EB;
  --hq-error: #A33A32;
  --hq-error-soft: #F7E7E5;
  --hq-warning: #765719;
  --hq-warning-soft: #FFF3D6;
  --hq-info: #315C82;
  --hq-info-soft: #EAF2F8;
  --hq-focus: #F4A100;
  --hq-selection: var(--hq-blue);

  /* Learning axes */
  --hq-axis-lengua: var(--hq-terracotta);
  --hq-axis-literatura: var(--hq-brown);
  --hq-axis-comprension: var(--hq-olive);

  /* Typography — canonical HispanoQuest hierarchy (Prancha Tipográfica 2026-08-25) */
  --hq-font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hq-font-heading: 'Rubik', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --hq-font-action: 'Nunito', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --hq-font-impact: 'Bungee', 'Rubik', system-ui, sans-serif;
  --hq-font-data: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hq-font-reading: var(--hq-font-body);
  --hq-font-ui: var(--hq-font-action);
  --hq-font-display: var(--hq-font-heading);
  --hq-font-editorial-accent: var(--hq-font-heading);

  /* Back-compatible font aliases used by the current runtime */
  --hq-body: var(--hq-font-body);
  --hq-ui: var(--hq-font-ui);
  --hq-display: var(--hq-font-display);
  --hq-impact: var(--hq-font-impact);
  --hq-data: var(--hq-font-data);
  --hq-editorial: var(--hq-font-heading);
  --hq-reader-alt: var(--hq-font-reading);
  --hq-literary: var(--hq-font-body);

  --hq-type-xs: 12px;
  --hq-type-sm: 14px;
  --hq-type-md: 16px;
  --hq-type-lg: 18px;
  --hq-type-xl: 22px;
  --hq-type-2xl: 28px;
  --hq-type-3xl: 36px;
  --hq-type-4xl: 44px;

  --hq-line-tight: 1.15;
  --hq-line-heading: 1.25;
  --hq-line-body: 1.55;
  --hq-line-reading: 1.7;

  --hq-weight-regular: 400;
  --hq-weight-semibold: 600;
  --hq-weight-bold: 700;

  /* 8px spatial grid */
  --hq-space-0: 0;
  --hq-space-1: 8px;
  --hq-space-2: 16px;
  --hq-space-3: 24px;
  --hq-space-4: 32px;
  --hq-space-5: 48px;
  --hq-space-6: 64px;
  --hq-space-7: 80px;

  /* Back-compatible aliases */
  --hq-spacing-1: var(--hq-space-1);
  --hq-spacing-2: var(--hq-space-2);
  --hq-spacing-3: var(--hq-space-3);
  --hq-spacing-4: var(--hq-space-4);
  --hq-spacing-5: var(--hq-space-5);

  /* Shape */
  --hq-radius-micro: 4px;
  --hq-radius-card: 8px;
  --hq-radius-modal: 12px;
  --hq-radius-pill: 999px;

  /* Elevation — use sparingly */
  --hq-shadow-none: none;
  --hq-elevation-1: 0 2px 4px rgba(19, 41, 75, 0.08);
  --hq-elevation-2: 0 4px 12px rgba(19, 41, 75, 0.12);
  --hq-elevation-4: 0 8px 24px rgba(19, 41, 75, 0.20);

  /* Interaction */
  --hq-hit-target: 44px;
  --hq-focus-width: 3px;
  --hq-focus-offset: 3px;
  --hq-disabled-opacity: 1;
  --hq-pressed-scale: 0.98;
  --hq-motion-fast: 80ms;
  --hq-motion-base: 120ms;
  --hq-motion-slow: 180ms;

  /* Layout */
  --hq-content-max: 1180px;
  --hq-teacher-max: 1440px;
  --hq-reading-max: 760px;
  --hq-page-gutter: clamp(16px, 3vw, 32px);
  --hq-section-gap: clamp(24px, 4vw, 48px);

  /* Layering */
  --hq-z-base: 0;
  --hq-z-sticky: 20;
  --hq-z-nav: 40;
  --hq-z-popover: 70;
  --hq-z-modal: 100;
  --hq-z-toast: 120;
}

html, body {
  font-family: var(--hq-font-body);
  color: var(--hq-text);
  background: var(--hq-cream);
}

:where(button, [role="button"], a, input, select, textarea) {
  font-family: var(--hq-font-ui);
}

:where(button, [role="button"], input, select, textarea) {
  min-height: var(--hq-hit-target);
}

:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: var(--hq-focus-width) solid var(--hq-focus) !important;
  outline-offset: var(--hq-focus-offset) !important;
}

.hq-button {
  min-height: var(--hq-hit-target);
  padding: var(--hq-space-1) var(--hq-space-2);
  border: 0;
  border-radius: var(--hq-radius-card);
  font-weight: var(--hq-weight-bold);
  line-height: var(--hq-line-tight);
  box-shadow: var(--hq-elevation-1);
  cursor: pointer;
  transition:
    background-color var(--hq-motion-base) ease,
    color var(--hq-motion-base) ease,
    border-color var(--hq-motion-base) ease,
    box-shadow var(--hq-motion-base) ease,
    transform var(--hq-motion-fast) ease,
    opacity var(--hq-motion-base) ease;
}

.hq-button--primary { background: var(--hq-terracotta); color: var(--hq-white); }
.hq-button--primary:hover:not(:disabled) { background: var(--hq-terracotta-hover); }
.hq-button--primary:active:not(:disabled) { background: var(--hq-terracotta-pressed); transform: scale(var(--hq-pressed-scale)); }

.hq-button--secondary { background: var(--hq-blue); color: var(--hq-white); }
.hq-button--secondary:hover:not(:disabled) { background: var(--hq-blue-hover); }
.hq-button--secondary:active:not(:disabled) { background: var(--hq-blue-pressed); transform: scale(var(--hq-pressed-scale)); }

.hq-button--ghost { background: transparent; color: var(--hq-blue); border: 1px solid var(--hq-blue); box-shadow: none; }

.hq-button:disabled,
.hq-button[aria-disabled="true"] {
  opacity: var(--hq-disabled-opacity);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hq-surface {
  background: var(--hq-paper);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-radius-card);
}

.hq-card {
  background: var(--hq-paper);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-radius-card);
  box-shadow: var(--hq-elevation-1);
  padding: var(--hq-space-2);
}

.hq-modal {
  background: var(--hq-paper);
  border: 1px solid var(--hq-border);
  border-radius: var(--hq-radius-modal);
  box-shadow: var(--hq-elevation-4);
  padding: var(--hq-space-3);
}

.hq-reading-body {
  width: min(100%, var(--hq-reading-max));
  margin-inline: auto;
  font-family: var(--hq-font-reading);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: var(--hq-line-reading);
}

/* Selected is not the same as correct. Success appears only after correction. */
.hq-option[aria-checked="true"],
.hq-option[data-selected="true"] {
  border-color: var(--hq-selection);
  background: var(--hq-selection);
  color: var(--hq-white);
}

.hq-status--success { color: var(--hq-success); background: var(--hq-success-soft); }
.hq-status--error { color: var(--hq-error); background: var(--hq-error-soft); }
.hq-status--warning { color: var(--hq-warning); background: var(--hq-warning-soft); }
.hq-status--info { color: var(--hq-info); background: var(--hq-info-soft); }


/* CP55.3 P0 · visibility contract: light surfaces never use pale functional text */
.hq-surface,.hq-card,.hq-modal{color:var(--hq-text)}
.hq-muted,[data-tone="muted"]{color:var(--hq-muted)!important}
.hq-button:disabled,.hq-button[aria-disabled="true"]{opacity:1!important;background:var(--hq-disabled-bg)!important;color:var(--hq-disabled-text)!important;border:1px solid var(--hq-border-strong)!important}

.hq-high-contrast,
[data-contrast="high"] {
  --hq-cream: #1A1A1A;
  --hq-paper: #1A1A1A;
  --hq-text: #F4A100;
  --hq-muted: #F4A100;
  --hq-border: #F4A100;
  --hq-selection: #F4A100;
  background: #1A1A1A;
  color: #F4A100;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .hq-button:active:not(:disabled) { transform: none; }
}


:where(h1,h2,h3,h4,h5,h6,.hq-heading,.hq-title) { font-family: var(--hq-font-heading); }
:where(.hq-impact,.hq-world-kicker,.hq-xp-badge) { font-family: var(--hq-font-impact); }
:where(.hq-data,.hq-progress-data,time,[data-ui="metric"]) { font-family: var(--hq-font-data); font-variant-numeric: tabular-nums; }
:where(button,.hq-button,[role="button"]) { font-family: var(--hq-font-action); font-weight: 800; }