/* Canonical MAIC UI tokens.
   These tokens alias the existing legacy/profile variables so migration can
   proceed without a risky page-wide rewrite. */

:root,
html[data-maic-theme] {
  /* Surfaces */
  --maic-surface-page: var(--gradient-bg, linear-gradient(135deg, #3a3d5c, #4a4d6c, #5a5d7c));
  --maic-surface-page-solid: var(--bg-primary, #3a3d5c);
  --maic-surface-panel: var(--bg-card, rgb(44 47 72 / 80%));
  --maic-surface-panel-strong: rgb(44 47 72 / 94%);
  --maic-surface-panel-muted: var(--bg-secondary, #4a4d6c);
  --maic-surface-input: var(--bg-input, rgb(255 255 255 / 5%));
  --maic-surface-overlay: rgb(0 0 0 / 50%);
  --maic-surface-chrome: var(--theme-surface-chrome, rgb(255 255 255 / 10%));
  --maic-surface-chrome-muted: var(--theme-surface-chrome-muted, rgb(255 255 255 / 8%));
  --maic-surface-chrome-hover: var(--theme-surface-chrome-hover, rgb(255 255 255 / 12%));

  /* Text */
  --maic-text-primary: var(--text-primary, #e0e0e0);
  --maic-text-secondary: var(--text-secondary, #c1c3e0);
  --maic-text-muted: var(--text-muted, #b0b0b0);
  --maic-text-inverse: #fff;
  --maic-text-on-action: var(--theme-action-text, #0f172a);

  /* Action and status */
  --maic-action-primary: var(--primary-color, #8b9cf7);
  --maic-action-primary-strong: var(--primary-color-dark, #6366f1);
  --maic-action-secondary: var(--secondary-color, #9d7bf0);
  --maic-action-accent: var(--accent-color, #f5a5fc);
  --maic-status-success: var(--theme-admin-v2-led-green, #0f8d66);
  --maic-status-warning: var(--theme-admin-v2-led-yellow, #be8a18);
  --maic-status-danger: var(--theme-admin-v2-led-red, #c6454f);
  --maic-status-neutral: var(--theme-admin-v2-led-neutral, #7b8fab);
  --maic-status-info: var(--maic-action-primary);
  --maic-status-success-soft: color-mix(in srgb, var(--maic-status-success) 15%, transparent);
  --maic-status-success-muted: color-mix(in srgb, var(--maic-status-success) 24%, transparent);
  --maic-status-success-border: color-mix(in srgb, var(--maic-status-success) 32%, transparent);
  --maic-status-warning-soft: color-mix(in srgb, var(--maic-status-warning) 15%, transparent);
  --maic-status-warning-muted: color-mix(in srgb, var(--maic-status-warning) 24%, transparent);
  --maic-status-warning-border: color-mix(in srgb, var(--maic-status-warning) 32%, transparent);
  --maic-status-danger-soft: color-mix(in srgb, var(--maic-status-danger) 12%, transparent);
  --maic-status-danger-muted: color-mix(in srgb, var(--maic-status-danger) 20%, transparent);
  --maic-status-danger-border: color-mix(in srgb, var(--maic-status-danger) 36%, transparent);
  --maic-status-neutral-soft: color-mix(in srgb, var(--maic-status-neutral) 14%, transparent);
  --maic-status-neutral-muted: color-mix(in srgb, var(--maic-status-neutral) 24%, transparent);
  --maic-status-neutral-border: color-mix(in srgb, var(--maic-status-neutral) 34%, transparent);
  --maic-status-info-soft: color-mix(in srgb, var(--maic-status-info) 14%, transparent);
  --maic-status-info-muted: color-mix(in srgb, var(--maic-status-info) 22%, transparent);
  --maic-status-info-border: color-mix(in srgb, var(--maic-status-info) 34%, transparent);
  --maic-status-success-on-light: color-mix(in srgb, var(--maic-status-success) 78%, var(--maic-surface-overlay));
  --maic-status-warning-on-light: color-mix(in srgb, var(--maic-status-warning) 78%, var(--maic-surface-overlay));
  --maic-status-danger-on-light: color-mix(in srgb, var(--maic-status-danger) 82%, var(--maic-surface-overlay));
  --maic-status-neutral-on-light: color-mix(in srgb, var(--maic-status-neutral) 74%, var(--maic-surface-overlay));
  --maic-status-info-on-light: color-mix(in srgb, var(--maic-status-info) 78%, var(--maic-surface-overlay));
  --maic-gradient-action-primary:
    var(
      --gradient-button,
      linear-gradient(135deg, var(--maic-action-primary-strong), var(--maic-action-secondary))
    );
  --maic-gradient-brand-title:
    var(
      --gradient-text,
      linear-gradient(
        135deg,
        var(--maic-action-primary) 0%,
        var(--maic-action-secondary) 50%,
        var(--maic-action-accent) 100%
      )
    );
  --maic-gradient-panel-strong:
    linear-gradient(
      135deg,
      var(--maic-surface-panel-muted),
      var(--maic-surface-panel-strong)
    );
  --maic-gradient-panel-inverse:
    linear-gradient(
      135deg,
      var(--maic-surface-panel-strong),
      var(--maic-surface-panel-muted)
    );
  --maic-gradient-status-sheen:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--maic-text-inverse) 40%, transparent),
      transparent
    );
  --maic-brand-kakao-surface: linear-gradient(135deg, #fae100, #f4d21f);
  --maic-brand-kakao-border: rgb(245 208 39 / 70%);
  --maic-brand-kakao-text: #2b1818;

  /* Chat detail semantic aliases */
  --maic-chat-detail-title-definition: var(--maic-action-primary-strong);
  --maic-chat-detail-title-rules: var(--maic-status-success);
  --maic-chat-detail-title-exception: var(--maic-status-danger);
  --maic-chat-detail-title-learning: var(--maic-status-warning);
  --maic-chat-detail-title-advanced: var(--maic-action-secondary);
  --maic-chat-detail-title-comparison: var(--maic-status-neutral);
  --maic-chat-detail-title-correction: var(--maic-status-warning);
  --maic-chat-detail-title-tip: var(--maic-status-warning);
  --maic-chat-detail-text-on-light: color-mix(in srgb, var(--maic-surface-overlay) 78%, var(--maic-text-inverse));
  --maic-chat-detail-text-muted: color-mix(in srgb, var(--maic-surface-overlay) 58%, var(--maic-text-inverse));
  --maic-chat-detail-surface: var(--maic-text-inverse);
  --maic-chat-detail-surface-muted: color-mix(in srgb, var(--maic-action-primary) 6%, var(--maic-text-inverse));
  --maic-chat-detail-legend-surface:
    linear-gradient(
      135deg,
      var(--maic-chat-detail-surface-muted) 0%,
      var(--maic-chat-detail-surface) 100%
    );
  --maic-chat-detail-surface-warning: color-mix(in srgb, var(--maic-status-warning) 16%, var(--maic-text-inverse));
  --maic-chat-detail-border: color-mix(in srgb, var(--maic-surface-overlay) 14%, var(--maic-text-inverse));
  --maic-chat-detail-border-accent: color-mix(in srgb, var(--maic-action-primary) 24%, var(--maic-text-inverse));
  --maic-chat-detail-border-warning: var(--maic-status-warning);
  --maic-chat-detail-emphasis: var(--maic-action-primary);
  --maic-chat-detail-emphasis-muted: color-mix(in srgb, var(--maic-action-primary) 16%, transparent);
  --maic-chat-detail-emphasis-border: color-mix(in srgb, var(--maic-action-primary) 34%, transparent);
  --maic-chat-detail-card-shadow: 0 2px 8px color-mix(in srgb, var(--maic-surface-overlay) 6%, transparent);
  --maic-chat-detail-card-shadow-hover: 0 1px 3px color-mix(in srgb, var(--maic-surface-overlay) 10%, transparent);
  --maic-chat-detail-word-subject: var(--maic-action-primary-strong);
  --maic-chat-detail-word-verb: var(--maic-status-warning);
  --maic-chat-detail-word-object: var(--maic-status-success);
  --maic-chat-detail-word-complement: var(--maic-action-secondary);
  --maic-chat-detail-word-object-complement: var(--maic-action-accent);
  --maic-chat-detail-word-adjectival: var(--maic-status-neutral);
  --maic-chat-detail-word-adverbial: var(--maic-status-danger);
  --maic-chat-detail-word-prepositional: var(--maic-status-neutral);
  --maic-chat-detail-level-0: var(--maic-status-danger);
  --maic-chat-detail-level-1: var(--maic-action-primary-strong);
  --maic-chat-detail-level-2: var(--maic-status-success);
  --maic-chat-detail-level-3: var(--maic-status-warning);
  --maic-chat-detail-level-4: var(--maic-action-secondary);
  --maic-chat-detail-level-5: var(--maic-status-neutral);
  --maic-chat-bracket-0: var(--maic-action-primary-strong);
  --maic-chat-bracket-1: var(--maic-status-success);
  --maic-chat-bracket-2: var(--maic-status-warning);
  --maic-chat-bracket-3: var(--maic-action-secondary);
  --maic-chat-bracket-4: var(--maic-status-neutral);
  --maic-chat-bracket-bg-0: color-mix(in srgb, var(--maic-chat-bracket-0) 10%, var(--maic-text-inverse));
  --maic-chat-bracket-bg-1: color-mix(in srgb, var(--maic-chat-bracket-1) 10%, var(--maic-text-inverse));
  --maic-chat-bracket-bg-2: color-mix(in srgb, var(--maic-chat-bracket-2) 12%, var(--maic-text-inverse));
  --maic-chat-bracket-bg-3: color-mix(in srgb, var(--maic-chat-bracket-3) 10%, var(--maic-text-inverse));
  --maic-chat-bracket-bg-4: color-mix(in srgb, var(--maic-chat-bracket-4) 12%, var(--maic-text-inverse));
  --maic-chat-bracket-border-0: color-mix(in srgb, var(--maic-chat-bracket-0) 28%, var(--maic-text-inverse));
  --maic-chat-bracket-border-1: color-mix(in srgb, var(--maic-chat-bracket-1) 28%, var(--maic-text-inverse));
  --maic-chat-bracket-border-2: color-mix(in srgb, var(--maic-chat-bracket-2) 34%, var(--maic-text-inverse));
  --maic-chat-bracket-border-3: color-mix(in srgb, var(--maic-chat-bracket-3) 28%, var(--maic-text-inverse));
  --maic-chat-bracket-border-4: color-mix(in srgb, var(--maic-chat-bracket-4) 34%, var(--maic-text-inverse));
  --maic-chat-bracket-label-bg-0: color-mix(in srgb, var(--maic-chat-bracket-0) 18%, var(--maic-text-inverse));
  --maic-chat-bracket-label-bg-1: color-mix(in srgb, var(--maic-chat-bracket-1) 18%, var(--maic-text-inverse));
  --maic-chat-bracket-label-bg-2: color-mix(in srgb, var(--maic-chat-bracket-2) 20%, var(--maic-text-inverse));
  --maic-chat-bracket-label-bg-3: color-mix(in srgb, var(--maic-chat-bracket-3) 18%, var(--maic-text-inverse));
  --maic-chat-bracket-label-bg-4: color-mix(in srgb, var(--maic-chat-bracket-4) 18%, var(--maic-text-inverse));
  --maic-chat-bracket-label-text-0: var(--maic-chat-bracket-0);
  --maic-chat-bracket-label-text-1: var(--maic-chat-bracket-1);
  --maic-chat-bracket-label-text-2: var(--maic-chat-bracket-2);
  --maic-chat-bracket-label-text-3: var(--maic-chat-bracket-3);
  --maic-chat-bracket-label-text-4: var(--maic-chat-bracket-4);
  --maic-chat-detail-difficulty-elementary-bg:
    linear-gradient(
      135deg,
      var(--maic-action-primary-strong),
      var(--maic-action-primary)
    );
  --maic-chat-detail-difficulty-intermediate-bg:
    linear-gradient(
      135deg,
      var(--maic-status-success),
      color-mix(in srgb, var(--maic-status-success) 72%, var(--maic-text-inverse))
    );
  --maic-chat-detail-difficulty-advanced-bg:
    linear-gradient(
      135deg,
      var(--maic-action-secondary),
      color-mix(in srgb, var(--maic-action-secondary) 72%, var(--maic-text-inverse))
    );
  --maic-chat-detail-difficulty-elementary-shadow:
    0 2px 8px
    color-mix(in srgb, var(--maic-action-primary-strong) 30%, transparent);
  --maic-chat-detail-difficulty-intermediate-shadow:
    0 2px 8px
    color-mix(in srgb, var(--maic-status-success) 30%, transparent);
  --maic-chat-detail-difficulty-advanced-shadow:
    0 2px 8px
    color-mix(in srgb, var(--maic-action-secondary) 30%, transparent);
  --maic-chatbox-placeholder-surface: color-mix(in srgb, var(--maic-text-inverse) 60%, transparent);
  --maic-chatbox-placeholder-border: color-mix(in srgb, var(--maic-surface-overlay) 20%, transparent);
  --maic-chatbox-placeholder-text: color-mix(in srgb, var(--maic-surface-overlay) 86%, var(--maic-text-inverse));

  /* Borders, focus, elevation, shape */
  --maic-border-subtle: var(--border-light, rgb(255 255 255 / 10%));
  --maic-border-chrome: var(--theme-border-chrome, rgb(255 255 255 / 15%));
  --maic-border-chrome-hover: var(--theme-border-chrome-hover, rgb(255 255 255 / 25%));
  --maic-border-focus: var(--border-focus, var(--maic-action-primary));
  --maic-border-subtle-muted: color-mix(in srgb, var(--maic-border-subtle) 60%, transparent);
  --maic-border-accent-muted: color-mix(in srgb, var(--maic-action-primary) 24%, transparent);
  --maic-border-accent: color-mix(in srgb, var(--maic-action-primary) 42%, transparent);
  --maic-radius-card: var(--border-radius, 20px);
  --maic-radius-control: var(--border-radius-button, 15px);
  --maic-radius-input: var(--border-radius-input, 15px);
  --maic-radius-small: var(--border-radius-small, 10px);
  --maic-radius-pill: 999px;
  --maic-radius-round: 50%;
  --maic-shadow-card: var(--shadow-light, 8px 8px 16px rgb(0 0 0 / 30%));
  --maic-shadow-card-contrast: var(--shadow-dark, -8px -8px 16px rgb(255 255 255 / 10%));
  --maic-shadow-card-hover: var(--shadow-hover-light, 12px 12px 24px rgb(0 0 0 / 40%));
  --maic-shadow-card-hover-contrast: var(--shadow-hover-dark, -12px -12px 24px rgb(255 255 255 / 15%));
  --maic-shadow-card-pressed: var(--shadow-pressed-light, 4px 4px 8px rgb(0 0 0 / 30%));
  --maic-shadow-card-pressed-contrast: var(--shadow-pressed-dark, -4px -4px 8px rgb(255 255 255 / 10%));
  --maic-shadow-control: var(--shadow-button, 0 4px 12px rgb(139 156 247 / 30%));
  --maic-shadow-text-subtle: var(--text-shadow-light, 0 2px 4px rgb(0 0 0 / 30%));
  --maic-shadow-focus-ring: 0 0 20px rgb(139 156 247 / 20%);
  --maic-shadow-input-shell: 0 -18px 46px rgb(8 10 28 / 38%);
  --maic-shadow-control-focus: 0 0 15px color-mix(in srgb, var(--maic-action-primary) 20%, transparent);
  --maic-shadow-control-hover-subtle: 0 2px 8px color-mix(in srgb, var(--maic-surface-overlay) 10%, transparent);
  --maic-shadow-control-hover: 0 6px 12px color-mix(in srgb, var(--maic-surface-overlay) 15%, transparent);
  --maic-shadow-control-active: 0 4px 12px color-mix(in srgb, var(--maic-action-primary) 20%, transparent);
  --maic-shadow-panel-soft: 0 4px 12px color-mix(in srgb, var(--maic-surface-overlay) 30%, transparent);
  --maic-shadow-panel-modal: 0 10px 30px color-mix(in srgb, var(--maic-surface-overlay) 50%, transparent);
  --maic-shadow-admin-card:
    0 6px 14px color-mix(in srgb, var(--maic-surface-overlay) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--maic-text-inverse) 3%, transparent);
  --maic-shadow-admin-inline:
    0 2px 8px color-mix(in srgb, var(--maic-surface-overlay) 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--maic-action-primary) 18%, transparent);
  --maic-shadow-inset-control:
    inset 4px 4px 8px rgb(0 0 0 / 30%),
    inset -4px -4px 8px rgb(255 255 255 / 10%);
  --maic-shadow-inset-panel:
    inset 8px 8px 16px rgb(0 0 0 / 30%),
    inset -8px -8px 16px rgb(255 255 255 / 10%);

  /* Typography */
  --maic-font-sans: var(--font-family, "Pretendard Variable", system-ui, sans-serif);
  --maic-font-mono: "Courier New", monospace;
  --maic-font-size-xs: var(--font-size-xs, 0.8rem);
  --maic-font-size-sm: var(--font-size-sm, 0.9rem);
  --maic-font-size-base: var(--font-size-base, 1rem);
  --maic-font-size-lg: var(--font-size-lg, 1.2rem);
  --maic-font-size-xl: var(--font-size-xl, 1.5rem);
  --maic-font-weight-normal: var(--font-weight-normal, 400);
  --maic-font-weight-medium: var(--font-weight-medium, 500);
  --maic-font-weight-semibold: var(--font-weight-semibold, 600);
  --maic-font-weight-bold: var(--font-weight-bold, 700);

  /* Spacing and motion */
  --maic-space-xs: var(--spacing-xs, 0.5rem);
  --maic-space-sm: var(--spacing-sm, 1rem);
  --maic-space-md: var(--spacing-md, 1.5rem);
  --maic-space-lg: var(--spacing-lg, 2rem);
  --maic-space-xl: var(--spacing-xl, 3rem);
  --maic-transition-fast: var(--transition-fast, 0.2s ease);
  --maic-transition-normal: var(--transition-normal, 0.3s ease);
  --maic-transition-slow: var(--transition-slow, 0.5s ease);
}