/* ================================================================
   BitTradeBlog Design Tokens — variables.css
   Primary: rgba(0,217,255,1) = #00D9FF
   Generated: 2026-03
================================================================ */

:root {

  /* ── Brand Blue ─────────────────────────────────────────────── */
  /* 差し色: #00D9FF / グラデーションは白方向 / 暗背景はティール系 */
  --blue-50:  #E5F8FF;   /* #00D9FF → 白方向の薄色 */
  --blue-100: #B3ECFF;
  --blue-200: #66D9FF;
  --blue-300: #00D9FF;   /* PRIMARY — 差し色はここ一色 */
  --blue-400: #00D9FF;   /* hover時も同色（明度はopacityで調整） */
  --blue-500: #00BFEB;   /* dark用 */
  --blue-600: #009DC2;
  --blue-700: #005470;   /* 暗背景ティール */
  --blue-800: #003348;
  --blue-900: #001824;

  /* ── Neutrals ───────────────────────────────────────────────── */
  --gray-0:   #FFFFFF;
  --gray-50:  #F7F9FC;
  --gray-100: #EEF2F7;
  --gray-200: #DDE3ED;
  --gray-300: #C4CDD9;
  --gray-400: #9EACBB;
  --gray-500: #768898;
  --gray-600: #546070;
  --gray-700: #3A4553;
  --gray-800: #232D38;
  --gray-900: #111820;

  /* ── Semantic ───────────────────────────────────────────────── */
  --color-primary:       var(--blue-300);
  --color-primary-hover: var(--blue-400);
  --color-primary-dark:  var(--blue-500);
  --color-primary-dim:   var(--blue-50);

  --color-surface:       var(--gray-0);
  --color-bg:            var(--gray-50);
  --color-border:        var(--gray-200);
  --color-border-light:  var(--gray-100);

  --color-text:          var(--gray-900);
  --color-text-sub:      var(--gray-600);
  --color-text-muted:    var(--gray-400);

  --color-success:       #10B981;
  --color-success-bg:    #ECFDF5;
  --color-warning:       #F59E0B;
  --color-warning-bg:    #FFFBEB;
  --color-danger:        #EF4444;
  --color-danger-bg:     #FEF2F2;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans:  'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-mono:  'JetBrains Mono', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;

  --leading-tight:  1.3;
  --leading-snug:   1.45;
  --leading-normal: 1.7;
  --leading-loose:  1.85;

  /* ── Spacing (4px base) ──────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── Layout ──────────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  24px;
  --sidebar-width:  280px;
  --header-height:  60px;

  /* ── Border Radius ───────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 50, 80, 0.08), 0 1px 2px rgba(0, 50, 80, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 50, 80, 0.10), 0 2px 6px rgba(0, 50, 80, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 50, 80, 0.14), 0 4px 12px rgba(0, 50, 80, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 217, 255, 0.25);

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:   all 0.12s ease;
  --transition-normal: all 0.2s ease;
  --transition-slow:   all 0.35s ease;

  /* ── Z-index ─────────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;
}