/* ==========================================================================
   OrthoBro Design Tokens (P2 design system)
   Single source of truth for color, typography, spacing, radius, shadow,
   and motion. Loaded BEFORE styles.css; theme blocks in styles.css override
   the color tokens via [data-theme].
   ========================================================================== */

:root {
  /* ---- color ---- */
  --bg: #f6f8fc;
  --bg2: #eef4ff;
  --panel: rgba(255, 255, 255, 0.90);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --text: #101827;
  --muted: #526074;
  --line: rgba(15, 23, 42, 0.12);
  --primary: #1d4ed8;
  --primary-strong: #1e40af;
  --good: #16a34a;
  --good-bg: #dcfce7;
  --bad: #dc2626;
  --bad-bg: #fee2e2;
  --warn: #ca8a04;
  --warn-bg: #fef9c3;
  --glow-1: rgba(37, 99, 235, .18);
  --glow-2: rgba(249, 115, 22, .14);
  --card-texture: none;

  /* ---- shadow ---- */
  --shadow: 0 22px 70px rgba(30, 41, 59, .16);
  --small-shadow: 0 12px 30px rgba(30, 41, 59, .10);

  /* ---- radius ---- */
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  /* ---- typography ---- */
  --font: Georgia, "Times New Roman", Times, serif;
  --reading-font: Georgia, "Times New Roman", Times, serif;
  /* modular scale (rem, base 17px) */
  --fs-2xs: .72rem;
  --fs-xs: .78rem;
  --fs-sm: .86rem;
  --fs-base: 1rem;
  --fs-md: 1.08rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2rem;
  /* fluid headings */
  --fs-h2: clamp(1.45rem, 2.5vw, 2.2rem);
  --fs-h1: clamp(1.8rem, 4vw, 3rem);
  --leading-body: 1.58;
  --leading-heading: 1.1;

  /* ---- spacing (4px-biased grid, matches existing layout rhythm) ---- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 18px;
  --sp-10: 22px;
  --sp-11: 28px;

  /* ---- motion ---- */
  --dur-fast: .12s;
  --dur-base: .2s;
  --dur-slow: .24s;
  --ease-standard: ease;

  /* ---- layout ---- */
  --side-rail-gutter: 86px;

  /* ---- accessibility ---- */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Keyboard focus: consistent visible ring on interactive elements. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}