/* =============================================================
 * QRConnect Design Tokens — MiniMax-derived
 * -------------------------------------------------------------
 * Reference: https://getdesign.md/minimax/design-md
 * Confirmed decisions (2026-05-14):
 *   1) Toss blue #3182F6 fully removed — only ink + mm-brand-blue
 *   2) Korean hero: 64px / -1.5px / 1.15 (mobile 32px)
 *   3) Brand color mapping:
 *        coral   → vehicle / urgent
 *        magenta → pet / personal_item
 *        blue    → home_intercom / residential
 *        purple  → business
 *   4) Brand colors are reserved for product-card components only.
 *
 * Load order: design-tokens.css BEFORE Tailwind CDN.
 * This file is variables-only — including it does NOT change any page visually.
 * ============================================================= */

:root {
  /* ───── Primary monochrome ───── */
  --mm-primary:        #0a0a0a;
  --mm-on-primary:     #ffffff;
  --mm-primary-soft:   #181e25;
  --mm-ink:            #0a0a0a;
  --mm-ink-strong:     #000000;
  --mm-charcoal:       #222222;
  --mm-slate:          #45515e;
  --mm-steel:          #5f5f5f;
  --mm-stone:          #8e8e93;
  --mm-muted:          #a8aab2;

  /* ───── Surface ───── */
  --mm-canvas:         #ffffff;
  --mm-surface:        #f7f8fa;
  --mm-surface-soft:   #f2f3f5;
  --mm-hairline:       #e5e7eb;
  --mm-hairline-soft:  #eaecf0;

  /* ───── Brand accents (RESERVED for product-card) ─────
   * Do NOT apply these to generic buttons, body text, or input borders.
   * Allowed: product-card backgrounds, badge-new, promo-cta-card.
   */
  --mm-brand-coral:     #ff5530;  /* vehicle / urgent */
  --mm-brand-magenta:   #ea5ec1;  /* pet / personal_item */
  --mm-brand-blue:      #1456f0;  /* home_intercom / residential */
  --mm-brand-blue-mid:  #3b82f6;
  --mm-brand-blue-deep: #1d4ed8;  /* form focus, link emphasis */
  --mm-brand-blue-700:  #17437d;  /* doc tag text */
  --mm-brand-blue-200:  #bfdbfe;  /* badge-beta bg */
  --mm-brand-cyan:      #3daeff;
  --mm-brand-purple:    #a855f7;  /* business */

  /* ───── Semantic ───── */
  --mm-success-bg:   #e8ffea;
  --mm-success-text: #1ba673;
  --mm-error:        #d45656;
  --mm-on-dark:      #ffffff;
  --mm-footer-bg:    #0a0a0a;

  /* ───── Rounded scale ───── */
  --mm-r-xs:   4px;   /* code chips */
  --mm-r-sm:   6px;   /* compact controls */
  --mm-r-md:   8px;   /* inputs, search pill */
  --mm-r-lg:   12px;  /* doc cards */
  --mm-r-xl:   16px;  /* standard feature cards */
  --mm-r-xxl:  20px;  /* larger feature panels */
  --mm-r-xxxl: 24px;  /* ai product tile */
  --mm-r-hero: 32px;  /* vibrant product cards, promo CTA */
  --mm-r-full: 9999px;/* all buttons, all pill tabs, badges */

  /* ───── Spacing scale (4px base) ───── */
  --mm-s-xxs:        4px;
  --mm-s-xs:         8px;
  --mm-s-sm:        12px;
  --mm-s-md:        16px;
  --mm-s-lg:        20px;
  --mm-s-xl:        24px;
  --mm-s-xxl:       32px;
  --mm-s-xxxl:      40px;
  --mm-s-section-sm:48px;
  --mm-s-section:   64px;
  --mm-s-section-lg:80px;
  --mm-s-hero:      96px;

  /* ───── Elevation (flat-first; reserved levels) ───── */
  --mm-elev-1: 0 1px 2px 0 rgba(0,0,0,0.04);
  --mm-elev-2: 0 4px 6px 0 rgba(0,0,0,0.08);
  --mm-elev-3: 0 0 22px 0 rgba(0,0,0,0.08);
  --mm-elev-4: 0 12px 16px -4px rgba(36,36,36,0.08);

  /* ───── Typography stacks ─────
   * DM Sans (latin/digits) → Noto Sans KR (Hangul fallback) → system.
   * Browser performs per-glyph fallback automatically: ASCII renders in DM Sans,
   * Hangul renders in Noto Sans KR. Do NOT add a Korean-only font BEFORE DM Sans.
   */
  --mm-font-display: 'DM Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-body:    'DM Sans', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mm-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ───── Typography sizes (Korean-tuned)
   * MiniMax originals are designed for Latin. Hangul reads ~10-15% larger and
   * tolerates less negative letter-spacing — sizes below are the Korean-tuned
   * defaults. For Latin-only headings (e.g., the brand wordmark), override
   * with lang="en" selectors in mm-components.css.
   */
  --mm-fs-hero:       64px;  /* Latin: 80px */
  --mm-fs-display-lg: 48px;  /* Latin: 56px */
  --mm-fs-heading-lg: 36px;
  --mm-fs-heading-md: 28px;
  --mm-fs-heading-sm: 22px;
  --mm-fs-card-title: 20px;
  --mm-fs-subtitle:   18px;
  --mm-fs-body-md:    16px;
  --mm-fs-body-sm:    14px;
  --mm-fs-caption:    13px;
  --mm-fs-micro:      12px;

  --mm-lh-hero:       1.15;
  --mm-lh-display:    1.15;
  --mm-lh-heading-lg: 1.25;
  --mm-lh-heading:    1.30;
  --mm-lh-card-title: 1.45;
  --mm-lh-subtitle:   1.55;
  --mm-lh-body:       1.65;

  --mm-ls-hero:       -1.5px;
  --mm-ls-display-lg: -1px;
  --mm-ls-heading-lg: -0.5px;
  --mm-ls-heading-md: -0.3px;

  /* ───── Motion ─────
   * MiniMax follows a no-hover policy for documented states. We allow subtle
   * 150-200ms transitions for input focus and modal open/close — nothing else.
   */
  --mm-dur-fast:   150ms;
  --mm-dur-mid:    200ms;
  --mm-ease:       cubic-bezier(0.4, 0, 0.2, 1);

  /* ───── Layout containers ───── */
  --mm-container-max:    1280px;
  --mm-container-prose:  720px;
  --mm-container-sidebar:220px;
}

/* ───── Mobile typography downscale ───── */
@media (max-width: 1023px) {
  :root {
    --mm-fs-hero:       56px;
    --mm-fs-display-lg: 44px;
    --mm-fs-heading-lg: 32px;
    --mm-fs-heading-md: 26px;
  }
}

@media (max-width: 767px) {
  :root {
    --mm-fs-hero:       40px;
    --mm-fs-display-lg: 36px;
    --mm-fs-heading-lg: 28px;
    --mm-fs-heading-md: 24px;
  }
}

@media (max-width: 479px) {
  :root {
    --mm-fs-hero:       32px;
    --mm-fs-display-lg: 28px;
    --mm-fs-heading-lg: 24px;
  }
}