/* ============================================
   animism.jp — Design Tokens
   Usage: <link rel="stylesheet" href="/design-tokens.css">
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho&family=BIZ+UDPGothic:wght@400;700&display=swap');

:root {

  /* ── Colors: Background ── */
  --color-bg:            #0a0820;
  --color-bg-surface:    #14093a;
  --color-bg-card:       rgba(255,255,255,.05);
  --color-bg-input:      rgba(255,255,255,.07);
  --color-bg-overlay:    rgba(10,8,32,.88);

  /* ── Colors: Primary (Royal Indigo #312e81) ── */
  --color-primary:       #312e81;
  --color-primary-light: #4338ca;   /* ボタングラデ明側 */
  --color-primary-dark:  #312e81;   /* ボタングラデ暗側 */
  --color-primary-glow:  rgba(49,46,129,.4);
  --color-primary-faint: rgba(49,46,129,.12);

  /* ── Colors: Accent (Gold) ── */
  --color-accent:        #e8c86a;
  --color-accent-mid:    rgba(201,168,76,.5);
  --color-accent-faint:  rgba(201,168,76,.1);

  /* ── Colors: Text ── */
  --color-text:          #ffffff;
  --color-text-sub:      rgba(255,255,255,.75);
  --color-text-muted:    rgba(255,255,255,.45);
  --color-text-faint:    rgba(255,255,255,.28);

  /* ── Colors: Border ── */
  --color-border:        rgba(255,255,255,.1);
  --color-border-focus:  rgba(49,46,129,.7);
  --color-border-accent: rgba(201,168,76,.25);

  /* ── Colors: Status ── */
  --color-success-bg:    rgba(22,163,74,.12);
  --color-success-border:rgba(22,163,74,.3);
  --color-success-text:  #86efac;
  --color-error-bg:      rgba(220,38,38,.12);
  --color-error-border:  rgba(220,38,38,.3);
  --color-error-text:    #fca5a5;
  --color-info-bg:       rgba(49,46,129,.12);
  --color-info-border:   rgba(49,46,129,.3);
  --color-info-text:     rgba(255,255,255,.78);

  /* ── Typography ── */
  --font-display: 'BIZ UDPMincho', 'BIZ UDP明朝', serif;
  --font-body:    'BIZ UDPGothic', 'BIZ UDPゴシック', sans-serif;

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-btn:  8px;  /* ボタン ≈ 4% of ~300px width */
  --radius-lg:   16px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-primary:       0 4px 20px rgba(49,46,129,.3);
  --shadow-primary-hover: 0 8px 32px rgba(49,46,129,.5);
  --shadow-card:          0 2px 24px rgba(0,0,0,.25);

  /* ── Transitions ── */
  --transition:      .2s ease;
  --transition-slow: .4s ease;

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light));
  --gradient-bg:      radial-gradient(ellipse at 30% 20%, rgba(49,46,129,.14), transparent 60%),
                      radial-gradient(ellipse at 75% 85%, rgba(201,168,76,.05), transparent 55%);
}