/* =========================================
   Bull Tail Works — Design Tokens
   ========================================= */

:root {
  /* ---------- Color: Brand ---------- */
  --bt-blue-50:  #EFF3FA;
  --bt-blue-100: #DCE6F2;
  --bt-blue-200: #B6CAE3;
  --bt-blue-300: #88A6CD;
  --bt-blue-400: #5C82B3;
  --bt-blue-500: #3A65B0;  /* primary — muted, trustworthy */
  --bt-blue-600: #2F548E;
  --bt-blue-700: #284571;
  --bt-blue-800: #21385A;
  --bt-blue-900: #1A2C44;

  --bt-primary: var(--bt-blue-500);
  --bt-primary-hover: var(--bt-blue-600);
  --bt-primary-active: var(--bt-blue-700);

  /* ---------- Color: Neutrals ---------- */
  --bt-ink-900: #0F1722; /* near-black, headings */
  --bt-ink-800: #1A2433;
  --bt-ink-700: #2A3445;
  --bt-ink-600: #46505F; /* body */
  --bt-ink-500: #6B7480; /* muted */
  --bt-ink-400: #97A0AD; /* placeholder */
  --bt-ink-300: #C3CAD3; /* border strong */
  --bt-ink-200: #E1E5EB; /* border */
  --bt-ink-100: #EFF2F6; /* surface tint */
  --bt-ink-50:  #F6F8FB; /* page tint */
  --bt-white:   #FFFFFF;

  /* ---------- Color: Semantic ---------- */
  --bt-success: #1F9D5A;
  --bt-warning: #D98C1F;
  --bt-danger:  #D93B3B;
  --bt-info:    var(--bt-blue-500);

  /* ---------- Surfaces ---------- */
  --bt-surface-page: var(--bt-ink-50);
  --bt-surface-card: var(--bt-white);
  --bt-surface-hero: #EFF4FB;

  /* ---------- Typography ---------- */
  --bt-font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --bt-font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --bt-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --bt-fs-11: 11px;
  --bt-fs-12: 12px;
  --bt-fs-13: 13px;
  --bt-fs-14: 14px;
  --bt-fs-15: 15px;
  --bt-fs-16: 16px;
  --bt-fs-18: 18px;
  --bt-fs-20: 20px;
  --bt-fs-22: 22px;
  --bt-fs-24: 24px;
  --bt-fs-28: 28px;
  --bt-fs-32: 32px;
  --bt-fs-40: 40px;
  --bt-fs-48: 48px;

  --bt-fw-regular: 400;
  --bt-fw-medium:  500;
  --bt-fw-semibold: 600;
  --bt-fw-bold:    700;

  --bt-lh-tight:   1.25;
  --bt-lh-snug:    1.45;
  --bt-lh-normal:  1.7;
  --bt-lh-relaxed: 1.75;
  --bt-lh-loose:   1.9;

  --bt-tracking-wide: 0.08em;

  /* ---------- Spacing (4-base) ---------- */
  --bt-space-1: 4px;
  --bt-space-2: 8px;
  --bt-space-3: 12px;
  --bt-space-4: 16px;
  --bt-space-5: 20px;
  --bt-space-6: 24px;
  --bt-space-7: 28px;
  --bt-space-8: 32px;
  --bt-space-9: 36px;
  --bt-space-10: 40px;
  --bt-space-12: 48px;
  --bt-space-16: 64px;
  --bt-space-20: 80px;
  --bt-space-24: 96px;

  /* ---------- Radii ---------- */
  --bt-r-xs: 4px;
  --bt-r-sm: 6px;
  --bt-r-md: 8px;
  --bt-r-lg: 12px;
  --bt-r-xl: 16px;
  --bt-r-full: 999px;

  /* ---------- Shadows ---------- */
  --bt-shadow-xs: 0 1px 2px rgba(15, 23, 34, 0.04);
  --bt-shadow-sm: 0 1px 3px rgba(15, 23, 34, 0.06), 0 1px 2px rgba(15, 23, 34, 0.04);
  --bt-shadow-md: 0 4px 12px rgba(15, 23, 34, 0.06), 0 2px 4px rgba(15, 23, 34, 0.04);
  --bt-shadow-lg: 0 12px 32px rgba(15, 23, 34, 0.08), 0 4px 8px rgba(15, 23, 34, 0.04);
  --bt-shadow-focus: 0 0 0 3px rgba(58, 101, 176, 0.25);

  /* ---------- Layout ---------- */
  --bt-container-max: 1240px;
  --bt-gutter: 24px;

  /* ---------- Motion ---------- */
  --bt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --bt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bt-dur-fast: 120ms;
  --bt-dur-base: 200ms;
  --bt-dur-slow: 320ms;
}

/* Base resets used by artboards */
.bt-root,
.bt-root * { box-sizing: border-box; }
.bt-root {
  font-family: var(--bt-font-jp);
  color: var(--bt-ink-700);
  font-size: var(--bt-fs-15);
  line-height: var(--bt-lh-normal);
  -webkit-font-smoothing: antialiased;
}
.bt-root h1, .bt-root h2, .bt-root h3, .bt-root h4 {
  color: var(--bt-ink-900);
  font-weight: var(--bt-fw-bold);
  line-height: var(--bt-lh-tight);
  margin: 0;
}
.bt-root p { margin: 0; }
.bt-root a { color: var(--bt-primary); text-decoration: none; }
.bt-root button { font-family: inherit; }