/* ============================================================
   BEKOL — Design tokens
   Edit these to rebrand the whole site (front end + editor).
   Font sizes are in rem so the A+/A− tools and browser settings scale text.
   ============================================================ */

:root {
  --navy:        #1D1D4C;
  --navy-700:    #2A2A66;
  --navy-900:    #0F0F38;
  --navy-50:     #F4F4FB;
  --orange:      #FE7700;
  --orange-600:  #E66A00;
  --orange-text: #B35300; /* orange that passes contrast on white for small text */
  --cream:       #FFF6E1;
  --ink:         #1A1A2E;
  --muted:       #5B5B72;
  --line:        #E7E7EE;
  --bg:          #FFFFFF;
  --bg-soft:     #F1F2F7;
  --success:     #1E7F4F;
  --danger:      #B42318;

  --radius-sm:   10px;
  --radius:      18px;
  --radius-lg:   28px;

  --shadow-sm:   0 2px 8px rgba(29,29,76,0.06);
  --shadow:      0 12px 32px rgba(29,29,76,0.10);
  --shadow-lg:   0 24px 60px rgba(29,29,76,0.16);

  --maxw:        1200px;
  --gutter:      24px;
  --section-y:   60px;
  --transition:  200ms ease;

  --font:        "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Direction-aware arrow used by links and buttons (flipped for LTR pages). */
  --arrow:       "\2190";
  --arrow-shift: -4px;
}

[dir="ltr"] {
  --arrow:       "\2192";
  --arrow-shift: 4px;
}

@media (max-width: 640px) {
  :root { --gutter: 18px; --section-y: 60px; }
}