/* ===================================================
   Romptn Blocks — Design Tokens
   Blocks reference --rb-* only.
   Each site overrides via scoped selector.
   =================================================== */

:root {
  /* ── Background ─────────────────────────────────── */
  --rb-bg-base:     #FFFFFF;
  --rb-bg-raised:   #F8F8FA;
  --rb-bg-elevated: #F0F0F2;
  --rb-bg-overlay:  #E8E8EC;

  /* ── Primary Color ──────────────────────────────── */
  --rb-color-primary:      #007AFF;
  --rb-color-primary-soft: #ECF1F6;
  --rb-color-primary-muted: rgba(0, 122, 255, 0.55);

  /* ── Text ───────────────────────────────────────── */
  --rb-text-primary:   #1D1D1F;
  --rb-text-secondary: #6E6E73;
  --rb-text-tertiary:  #AEAEB2;

  /* ── Border ─────────────────────────────────────── */
  --rb-border:        rgba(0, 0, 0, 0.08);
  --rb-border-strong: rgba(0, 0, 0, 0.14);
  --rb-border-accent: rgba(0, 122, 255, 0.30);

  /* ── Semantic ───────────────────────────────────── */
  --rb-color-info:    #38BDF8;
  --rb-color-info-bg: rgba(56, 189, 248, 0.10);
  --rb-color-alert:    #F472B6;
  --rb-color-alert-bg: rgba(244, 114, 182, 0.10);
  --rb-color-memo:    #FBBF24;
  --rb-color-memo-bg: rgba(251, 191, 36, 0.10);

  /* ── Interactive ────────────────────────────────── */
  --rb-hover-bg:  rgba(0, 122, 255, 0.06);
  --rb-active-bg: rgba(0, 122, 255, 0.12);

  /* ── Radius ─────────────────────────────────────── */
  --rb-radius-sm:  6px;
  --rb-radius-md:  10px;
  --rb-radius-lg:  16px;

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

  /* ── Typography ─────────────────────────────────── */
  --rb-font-sans: system-ui, -apple-system, sans-serif;
  --rb-text-sm:   0.875rem;
  --rb-text-base: 1rem;
  --rb-text-lg:   1.125rem;
  --rb-text-xl:   1.25rem;
  --rb-font-bold: 700;
  --rb-leading-normal: 1.7;

  /* ── Spacing ────────────────────────────────────── */
  --rb-space-xs:  0.375rem;
  --rb-space-sm:  0.625rem;
  --rb-space-md:  1rem;
  --rb-space-lg:  1.5rem;
  --rb-space-xl:  2rem;
}

/* ── Mania override ─── delegates to theme --m-* tokens ── */
.romptn-blocks--mania {
  --rb-bg-base:     var(--m-bg-base, hsl(270 100% 4%));
  --rb-bg-raised:   var(--m-bg-raised, hsl(270 100% 5.5%));
  --rb-bg-elevated: var(--m-bg-elevated, hsl(270 100% 7%));
  --rb-bg-overlay:  var(--m-bg-overlay, hsl(270 100% 9%));

  --rb-color-primary:      var(--m-purple, #9B4DFF);
  --rb-color-primary-soft: var(--m-bg-overlay, hsl(270 100% 9%));
  --rb-color-primary-muted: rgba(155, 77, 255, 0.55);

  --rb-text-primary:   var(--m-text-primary, rgba(255, 255, 255, 1.0));
  --rb-text-secondary: var(--m-text-secondary, rgba(255, 255, 255, 0.82));
  --rb-text-tertiary:  var(--m-text-tertiary, rgba(255, 255, 255, 0.56));

  --rb-border:        var(--m-border, rgba(255, 255, 255, 0.10));
  --rb-border-strong: var(--m-border-strong, rgba(255, 255, 255, 0.16));
  --rb-border-accent: var(--m-border-accent, rgba(155, 77, 255, 0.30));

  --rb-color-info:    #38BDF8;
  --rb-color-info-bg: rgba(56, 189, 248, 0.12);
  --rb-color-alert:    #F472B6;
  --rb-color-alert-bg: rgba(244, 114, 182, 0.12);
  --rb-color-memo:    #FBBF24;
  --rb-color-memo-bg: rgba(251, 191, 36, 0.12);

  --rb-hover-bg:  var(--m-hover-bg, rgba(155, 77, 255, 0.08));
  --rb-active-bg: var(--m-active-bg, rgba(155, 77, 255, 0.14));

  --rb-radius-sm:  var(--m-radius-sm, 6px);
  --rb-radius-md:  var(--m-radius-md, 10px);
  --rb-radius-lg:  var(--m-radius-lg, 16px);

  --rb-ease:     var(--m-ease, cubic-bezier(0.16, 1, 0.3, 1));
  --rb-duration: var(--m-duration, 200ms);

  --rb-font-sans: var(--m-font-sans, 'Noto Sans JP', system-ui, sans-serif);
  --rb-text-sm:   var(--m-text-sm, 0.875rem);
  --rb-text-base: var(--m-text-base, 1rem);
  --rb-text-lg:   var(--m-text-lg, 1.125rem);
  --rb-text-xl:   var(--m-text-xl, 1.25rem);
  --rb-font-bold: var(--m-font-bold, 700);
  --rb-leading-normal: var(--m-leading-normal, 1.7);

  --rb-space-xs:  var(--m-space-xs, 0.375rem);
  --rb-space-sm:  var(--m-space-sm, 0.625rem);
  --rb-space-md:  var(--m-space-md, 1rem);
  --rb-space-lg:  var(--m-space-lg, 1.5rem);
  --rb-space-xl:  var(--m-space-xl, 2rem);
}