/* ===================================================
   Mania AI — Design Tokens
   Single source of truth for all visual values.
   =================================================== */

:root {
  /* ── Background (4-level elevation) ──────────────── */
  --m-bg-base:     hsl(270 100% 4%);      /* page body */
  --m-bg-raised:   hsl(270 100% 5.5%);    /* article area, main content */
  --m-bg-elevated: hsl(270 100% 7%);      /* cards, boxes, sidebar */
  --m-bg-overlay:  hsl(270 100% 9%);      /* modals, dropdowns, h2 bg */

  /* ── Brand Purple ────────────────────────────────── */
  --m-purple:       hsl(263 100% 65%);    /* #9B4DFF — THE brand color */
  --m-purple-hover: hsl(263 80% 75%);     /* hover */
  --m-purple-muted: hsl(263 60% 55%);     /* subdued (blockquote border) */

  /* ── Text (opacity-based hierarchy) ──────────────── */
  --m-text-primary:   rgba(255, 255, 255, 1.0);   /* headings, CTAs */
  --m-text-secondary: rgba(255, 255, 255, 0.82);  /* body text */
  --m-text-tertiary:  rgba(255, 255, 255, 0.56);  /* meta, dates */
  --m-text-disabled:  rgba(255, 255, 255, 0.32);  /* placeholders */

  /* ── Border (opacity-based hierarchy) ────────────── */
  --m-border-subtle: rgba(255, 255, 255, 0.06);   /* list dividers */
  --m-border:        rgba(255, 255, 255, 0.10);   /* card borders */
  --m-border-strong: rgba(255, 255, 255, 0.16);   /* section dividers */
  --m-border-accent: rgba(155, 77, 255, 0.30);    /* purple accent borders */

  /* ── Interactive States ──────────────────────────── */
  --m-hover-bg:   rgba(155, 77, 255, 0.08);
  --m-active-bg:  rgba(155, 77, 255, 0.14);
  --m-focus-ring: rgba(155, 77, 255, 0.50);

  /* ── Glow / Shadow ───────────────────────────────── */
  --m-glow-sm: 0 0 12px rgba(155, 77, 255, 0.20);
  --m-glow-md: 0 0 24px rgba(155, 77, 255, 0.30);
  --m-glow-lg: 0 0 48px rgba(155, 77, 255, 0.25);
  --m-shadow:  0 4px 16px rgba(0, 0, 0, 0.40);

  /* ── Semantic ────────────────────────────────────── */
  --m-success: #34C759;
  --m-warning: #FF9500;
  --m-error:   #FF3B30;

  /* ── Radius ──────────────────────────────────────── */
  --m-radius-sm:   6px;
  --m-radius-md:   10px;
  --m-radius-lg:   16px;
  --m-radius-pill: 9999px;

  /* ── Transition ──────────────────────────────────── */
  --m-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --m-duration: 200ms;

  /* ── Typography ──────────────────────────────────── */
  --m-font-sans: 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --m-font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;

  --m-text-xs:   clamp(0.7rem,   0.68rem + 0.1vw,  0.75rem);
  --m-text-sm:   clamp(0.8rem,   0.76rem + 0.2vw,  0.875rem);
  --m-text-base: clamp(0.9rem,   0.86rem + 0.2vw,  1rem);
  --m-text-lg:   clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --m-text-xl:   clamp(1.125rem, 1.05rem + 0.4vw,  1.25rem);
  --m-text-2xl:  clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
  --m-text-3xl:  clamp(1.5rem,   1.2rem  + 1.5vw,  1.875rem);

  --m-font-normal: 400;
  --m-font-medium: 500;
  --m-font-bold:   700;
  --m-font-black:  900;

  --m-leading-tight:  1.3;
  --m-leading-normal: 1.7;
  --m-leading-loose:  1.9;

  /* ── Spacing (fluid) ─────────────────────────────── */
  --m-space-xs:  clamp(0.25rem, 0.2rem  + 0.25vw, 0.5rem);
  --m-space-sm:  clamp(0.5rem,  0.4rem  + 0.5vw,  0.75rem);
  --m-space-md:  clamp(0.75rem, 0.6rem  + 0.75vw, 1.25rem);
  --m-space-lg:  clamp(1rem,    0.8rem  + 1vw,    1.5rem);
  --m-space-xl:  clamp(1.5rem,  1.2rem  + 1.5vw,  2.5rem);
  --m-space-2xl: clamp(2rem,    1.5rem  + 2.5vw,  4rem);
  --m-space-3xl: clamp(3rem,    2rem    + 4vw,    6rem);
}