/*!
 * MiraiAPI design tokens
 * Source of truth: MIRAIAPI_DESIGN_BRIEF.md §3
 * Anh tuananh chốt 2026-05-21.
 *
 * Theme: baseball-inspired Japan, tech-first, premium accessible.
 */

:root {
  /* ─── Color palette ─────────────────────────────── */

  /* Primary */
  --mirai-navy:        #10233F;
  --mirai-navy-soft:   #1B3658;
  --mirai-navy-tint:   #E8ECF2;
  --mirai-field:       #2F6B45;
  --mirai-field-soft:  #3F8557;
  --mirai-field-tint:  #ECF3EE;
  --mirai-cream:       #F5F1E8;
  --mirai-cream-deep:  #EDE7D6;

  /* Accent */
  --mirai-red:         #C83A31;
  --mirai-red-soft:    #E15A50;
  --mirai-red-tint:    #FBE9E7;
  --mirai-gold:        #D8B85C;
  --mirai-gold-soft:   #E5CE85;
  --mirai-gold-tint:   #FAF3DE;

  /* Neutral */
  --mirai-ink:         #1B1F24;
  --mirai-ink-soft:    #2D333C;
  --mirai-muted:       #6B7280;
  --mirai-muted-soft:  #9CA3AF;
  --mirai-border:      #D9DEE5;
  --mirai-border-soft: #ECEFF3;
  --mirai-bg:          #FFFFFF;
  --mirai-bg-alt:      #FBFAF6;

  /* Semantic mapping */
  --color-bg:          var(--mirai-bg);
  --color-bg-alt:      var(--mirai-bg-alt);
  --color-surface:     var(--mirai-bg);
  --color-surface-2:   var(--mirai-cream);
  --color-surface-3:   var(--mirai-navy);
  --color-text:        var(--mirai-ink);
  --color-text-soft:   var(--mirai-ink-soft);
  --color-text-muted:  var(--mirai-muted);
  --color-text-onDark: var(--mirai-cream);
  --color-border:      var(--mirai-border);
  --color-border-soft: var(--mirai-border-soft);
  --color-accent:      var(--mirai-red);
  --color-accent-soft: var(--mirai-red-tint);
  --color-highlight:   var(--mirai-gold);
  --color-tag:         var(--mirai-field);

  /* ─── Typography ────────────────────────────────── */

  --font-display: "Zen Kaku Gothic New", "Noto Sans JP", -apple-system, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-body: "Noto Sans JP", "Inter", -apple-system, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  3.75rem;   /* 60 */
  --fs-5xl:  4.75rem;   /* 76 */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.55;
  --lh-jp:     1.75;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-loose:  0.04em;
  --tracking-caps:   0.12em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ─── Spacing ───────────────────────────────────── */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ─── Radius ────────────────────────────────────── */

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ─── Shadow ────────────────────────────────────── */

  --shadow-1: 0 1px 0 rgba(16, 35, 63, 0.04), 0 4px 12px -6px rgba(16, 35, 63, 0.12);
  --shadow-2: 0 1px 0 rgba(16, 35, 63, 0.05), 0 12px 28px -14px rgba(16, 35, 63, 0.20);
  --shadow-3: 0 2px 0 rgba(16, 35, 63, 0.06), 0 24px 48px -20px rgba(16, 35, 63, 0.28);
  --shadow-inset: inset 0 0 0 1px var(--mirai-border);
  --shadow-inset-strong: inset 0 0 0 1px var(--mirai-navy);

  /* Accent-tinted */
  --shadow-red:  0 12px 28px -14px rgba(200, 58, 49, 0.45);
  --shadow-gold: 0 12px 28px -14px rgba(216, 184, 92, 0.45);

  /* ─── Layout ────────────────────────────────────── */

  --container-narrow: 880px;
  --container:        1180px;
  --container-wide:   1320px;

  --header-h: 72px;

  /* ─── Motion ────────────────────────────────────── */

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.2, 0.9, 0.3, 1.25);

  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 380ms;
  --t-reveal: 620ms;

  /* ─── Z-index ───────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* Light is default. Dark variant reserved cho future; KHÔNG dùng mặc định. */