/* ─────────────────────────────────────────────────────────────────────────
   tokens.css — Queen Grafter design tokens (Annica Studios)
   Palette matches the Flutter app (BITokens in lib/shared/theme/tokens.dart)
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color ─────────────────────────────────────────────────────────────── */
  --bi-primary:          #0E5BB8;
  --bi-primary-pressed:  #0A478F;
  --bi-primary-soft:     #E6EEF9;

  --bi-accent:           #E89412;
  --bi-accent-soft:      #FBEAD0;
  --bi-accent-pressed:   #C97E0A;

  --bi-bg:               #F4F6FA;
  --bi-surface:          #FFFFFF;
  --bi-surface-alt:      #FAFBFD;

  --bi-text:             #151B2E;
  --bi-text-muted:       #5B6372;
  --bi-text-subtle:      #8A909D;

  --bi-border:           #E3E7EF;
  --bi-border-strong:    #C9D0DC;

  --bi-success:          #1F8F5A;
  --bi-success-soft:     #DCF1E6;
  --bi-warning:          #C67C0B;
  --bi-warning-soft:     #FBEAD0;
  --bi-error:            #C2302B;
  --bi-error-soft:       #F6DDDC;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --bi-radius-sm:    6px;
  --bi-radius-btn:   10px;
  --bi-radius-card:  14px;
  --bi-radius-pill:  999px;

  /* ── Spacing (4-pt grid) ───────────────────────────────────────────────── */
  --bi-space-1:   4px;
  --bi-space-2:   8px;
  --bi-space-3:  12px;
  --bi-space-4:  16px;
  --bi-space-5:  20px;
  --bi-space-6:  24px;
  --bi-space-8:  32px;
  --bi-space-10: 40px;
  --bi-space-12: 48px;
  --bi-space-16: 64px;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --bi-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --bi-font-family:  'Nunito Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --bi-fs-xs:    12px;
  --bi-fs-sm:    14px;
  --bi-fs-base:  16px;
  --bi-fs-lg:    18px;
  --bi-fs-xl:    22px;
  --bi-fs-2xl:   28px;
  --bi-fs-3xl:   36px;

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

  --bi-lh-tight:   1.2;
  --bi-lh-normal:  1.5;
  --bi-lh-relaxed: 1.65;

  /* ── Touch targets ─────────────────────────────────────────────────────── */
  --bi-min-tap:    44px;
  --bi-chip-min:   40px;

  /* ── Elevation ─────────────────────────────────────────────────────────── */
  --bi-shadow-1: 0 1px 3px rgba(21,27,46,.07), 0 1px 2px rgba(21,27,46,.04);
  --bi-shadow-2: 0 4px 14px rgba(21,27,46,.09), 0 2px 4px rgba(21,27,46,.04);
  --bi-shadow-3: 0 16px 36px rgba(21,27,46,.13), 0 4px 10px rgba(21,27,46,.06);
  --bi-shadow-hover: 0 20px 48px rgba(14,91,184,.15), 0 6px 16px rgba(0,0,0,.06);

  /* ── Animation ─────────────────────────────────────────────────────────── */
  --bi-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --bi-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bi-bg);
  color: var(--bi-text);
  font-family: var(--bi-font-family);
  font-size: var(--bi-fs-base);
  line-height: var(--bi-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}