/* =============================================================
   MAH TOKENS — 日系柔美美學 (Japanese Idol Brand)
   MAH Design System v1.0 | 2026-03-27
   Contrast verified against WCAG AAA (7:1+) where possible
   ============================================================= */

/* ── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   LAYER 1: Primitive Tokens (Raw Values)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Pink Palette ──────────────────────────────────────── */
  --mah-pink-50:  #FFF0F3;
  --mah-pink-100: #FFE4EC;
  --mah-pink-200: #FFB7CC;
  --mah-pink-300: #FF91AF;   /* Brand pink — DECORATION ONLY (1.8:1, not for text) */
  --mah-pink-400: #F26E95;
  --mah-pink-500: #D45A7A;   /* Deep pink — AA text on white (4.8:1) */
  --mah-pink-600: #C24870;   /* Hover state */
  --mah-pink-700: #A83B60;   /* Active state */
  --mah-pink-800: #8B3A52;   /* Secondary text on #FFFCF5 (5.7:1 AA) */
  --mah-pink-900: #5C1A2E;   /* Primary text on #FFFCF5 (9.2:1 AAA) */
  --mah-pink-950: #3D0F1C;   /* Deepest, high-contrast headings */

  /* ── Warm White / Background Palette ───────────────────── */
  --mah-cream-50:  #FFFFFF;
  --mah-cream-100: #FFFCF5;  /* Brand background */
  --mah-cream-200: #FFF8EE;
  --mah-cream-300: #FFF0F3;  /* Soft pink tint */
  --mah-cream-400: #FFE4EC;
  --mah-cream-500: #F5D6DE;

  /* ── Gold Accent ────────────────────────────────────────── */
  --mah-gold-400: #E8B84B;
  --mah-gold-500: #C8941A;   /* on #FFFCF5 = 4.6:1 AA */
  --mah-gold-600: #A87A12;

  /* ── Muted Text ─────────────────────────────────────────── */
  --mah-muted-300: #C4929F;  /* Placeholder (non-interactive, ok) */
  --mah-muted-400: #B06080;  /* Caption — 18px+ only (3.8:1 AA Large) */
  --mah-muted-500: #8B3A52;  /* Secondary text (5.7:1 AA) */
}

/* ═══════════════════════════════════════════════════════════
   LAYER 2: Semantic Tokens (Functional Meaning)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Background ─────────────────────────────────────────── */
  --mah-bg-page:      var(--mah-cream-100);    /* #FFFCF5 — main background */
  --mah-bg-card:      var(--mah-cream-50);     /* #FFFFFF — card / elevated */
  --mah-bg-soft:      var(--mah-pink-50);      /* #FFF0F3 — section tint */
  --mah-bg-muted:     var(--mah-pink-100);     /* #FFE4EC — subtle highlight */

  /* ── Text ───────────────────────────────────────────────── */
  --mah-text-heading:    var(--mah-pink-900);   /* #5C1A2E — 9.2:1 AAA on bg */
  --mah-text-body:       var(--mah-pink-900);   /* #5C1A2E — default body text */
  --mah-text-secondary:  var(--mah-pink-800);   /* #8B3A52 — 5.7:1 AA */
  --mah-text-caption:         var(--mah-muted-400);  /* #B06080 — 3.8:1 AA Large (18px+) — USE ONLY for text ≥18px bold or ≥24px regular. For smaller text use --mah-text-caption-safe */
  --mah-text-caption-safe:    var(--mah-muted-500);  /* #8B3A52 — 5.7:1 AA — safe for all text sizes including 12px */
  --mah-text-placeholder:var(--mah-muted-300);  /* #C4929F — non-interactive */
  --mah-text-disabled:   var(--mah-muted-300);  /* #C4929F */
  --mah-text-inverse:    #FFFFFF;               /* for use on dark/pink backgrounds */
  --mah-text-on-primary: #FFFFFF;               /* white on #D45A7A = 5.1:1 AA */

  /* ── Brand / Interactive ────────────────────────────────── */
  --mah-color-primary:   var(--mah-pink-500);   /* #D45A7A — main CTA */
  --mah-color-primary-hover: var(--mah-pink-600);
  --mah-color-primary-active: var(--mah-pink-700);
  --mah-color-brand:     var(--mah-pink-300);   /* #FF91AF — decoration only */
  --mah-color-accent:    var(--mah-pink-200);   /* #FFB7CC — subtle accent */
  --mah-color-gold:      var(--mah-gold-500);   /* #C8941A */

  /* ── Border ─────────────────────────────────────────────── */
  --mah-border-subtle:   rgba(212, 90, 122, 0.12);
  --mah-border-default:  rgba(212, 90, 122, 0.25);
  --mah-border-strong:   rgba(212, 90, 122, 0.50);
  --mah-border-brand:    var(--mah-pink-300);   /* #FF91AF decorative border */

  /* ── Focus ──────────────────────────────────────────────── */
  --color-focus-ring:    var(--mah-pink-500);   /* #D45A7A */
  --color-bg:            var(--mah-bg-page);
}

/* ═══════════════════════════════════════════════════════════
   LAYER 3: Component Tokens
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Typography ─────────────────────────────────────────── */
  --mah-font-display: 'Nunito', 'Noto Sans TC', system-ui, sans-serif;
  --mah-font-body:    'Nunito', 'Noto Sans TC', system-ui, sans-serif;

  --mah-font-xs:    11px;
  --mah-font-sm:    13px;
  --mah-font-base:  15px;
  --mah-font-lg:    17px;
  --mah-font-xl:    20px;
  --mah-font-2xl:   24px;
  --mah-font-3xl:   30px;
  --mah-font-4xl:   38px;
  --mah-font-5xl:   48px;

  --mah-weight-light:    300;
  --mah-weight-regular:  400;
  --mah-weight-medium:   500;
  --mah-weight-semibold: 600;
  --mah-weight-bold:     700;
  --mah-weight-extrabold:800;

  --mah-leading-tight:   1.2;
  --mah-leading-snug:    1.4;
  --mah-leading-normal:  1.6;
  --mah-leading-relaxed: 1.75;
  --mah-leading-loose:   2.0;   /* Japanese/Chinese reading comfort */

  --mah-tracking-tight:  -0.02em;
  --mah-tracking-normal:  0;
  --mah-tracking-wide:    0.04em;
  --mah-tracking-wider:   0.08em;

  /* ── Spacing (8px Grid) ─────────────────────────────────── */
  --mah-space-0:   0;
  --mah-space-1:   4px;
  --mah-space-2:   8px;
  --mah-space-3:  12px;
  --mah-space-4:  16px;
  --mah-space-5:  20px;
  --mah-space-6:  24px;
  --mah-space-8:  32px;
  --mah-space-10: 40px;
  --mah-space-12: 48px;
  --mah-space-16: 64px;
  --mah-space-20: 80px;
  --mah-space-24: 96px;

  /* ── Border Radius (Soft/Pill — Japanese aesthetic) ─────── */
  --mah-radius-none:  0;
  --mah-radius-sm:    6px;    /* Tags, badges */
  --mah-radius-md:   12px;    /* Buttons, inputs */
  --mah-radius-lg:   20px;    /* Cards */
  --mah-radius-xl:   28px;    /* Large cards, modals */
  --mah-radius-2xl:  40px;    /* Hero sections */
  --mah-radius-full: 9999px;  /* Pills, avatars */

  /* ── Shadows (Soft Pink Glow) ───────────────────────────── */
  --mah-shadow-xs: 0 1px 2px rgba(212, 90, 122, 0.08);
  --mah-shadow-sm: 0 2px 8px rgba(212, 90, 122, 0.10);
  --mah-shadow-md: 0 4px 16px rgba(212, 90, 122, 0.12);
  --mah-shadow-lg: 0 8px 32px rgba(212, 90, 122, 0.15);
  --mah-shadow-xl: 0 16px 48px rgba(212, 90, 122, 0.18);

  /* ── Button Component Tokens ────────────────────────────── */
  --mah-btn-padding-y:      12px;
  --mah-btn-padding-x:      24px;
  --mah-btn-radius:         var(--mah-radius-full);
  --mah-btn-font-size:      var(--mah-font-base);
  --mah-btn-font-weight:    var(--mah-weight-semibold);
  --mah-btn-min-height:     44px;
  --mah-btn-transition:     all 0.2s ease;

  /* ── Card Component Tokens ──────────────────────────────── */
  --mah-card-padding:       var(--mah-space-6);
  --mah-card-radius:        var(--mah-radius-lg);
  --mah-card-shadow:        var(--mah-shadow-sm);
  --mah-card-bg:            var(--mah-bg-card);
  --mah-card-border:        1px solid var(--mah-border-subtle);

  /* ── Input Component Tokens ─────────────────────────────── */
  --mah-input-padding-y:    12px;
  --mah-input-padding-x:    16px;
  --mah-input-radius:       var(--mah-radius-md);
  --mah-input-border:       1.5px solid var(--mah-border-default);
  --mah-input-border-focus: 1.5px solid var(--mah-color-primary);
  --mah-input-min-height:   44px;

  /* ── Transitions ────────────────────────────────────────── */
  --mah-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --mah-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --mah-duration-fast:  120ms;
  --mah-duration-base:  200ms;
  --mah-duration-slow:  350ms;
}

/* ── Apply to .theme-mah ────────────────────────────────────── */
.theme-mah {
  font-family:      var(--mah-font-body);
  background-color: var(--mah-bg-page);
  color:            var(--mah-text-body);
  --color-focus-ring: var(--mah-color-primary);
  --color-bg:         var(--mah-bg-page);
}