/* =========================================================
   Direction D — Refined · Tekhelet Restraint
   Minimalist evolution of Kahal: single accent, hairline
   borders, flat surfaces, refined typography. Same DNA,
   without the "AI rainbow" pitfalls.
   ========================================================= */

:root {
  /* ── COLOR — restrained sky + ink ramp + single navy accent ── */

  /* Background — desaturated sky, signature kept but quieter */
  --r-sky-1:        #E6F0F8;    /* gradient top — softer than the original Sky 1 */
  --r-sky-2:        #F2F8FC;    /* gradient bottom */
  --r-sky-tint:     #F5FAFD;    /* almost-white wash for tinted bars */

  --r-surface:      #FFFFFF;
  --r-surface-2:    #F8FAFC;    /* slate-50 — for tabs, segmented bg */
  --r-surface-3:    #F1F5F9;    /* slate-100 — hover wash */

  /* Ink ramp — slate-based, calmer than the indigo undertone */
  --r-ink:          #0F172A;    /* slate-900 */
  --r-ink-2:        #1E293B;    /* slate-800 */
  --r-ink-3:        #334155;    /* slate-700 — emphasized body */
  --r-muted:        #64748B;    /* slate-500 — secondary text */
  --r-muted-2:      #94A3B8;    /* slate-400 — tertiary */
  --r-faint:        #CBD5E1;    /* slate-300 — disabled / placeholder */

  /* Borders — hairlines */
  --r-border:       #E2E8F0;    /* slate-200 — default hairline */
  --r-border-2:     #CBD5E1;    /* slate-300 — emphasized */
  --r-border-focus: #1E3A8A;    /* navy on focus */

  /* THE accent — drawn from the official logo PNG, single source of truth */
  --r-primary:      #1E3A8A;    /* tekhelet navy — only CTA color */
  --r-primary-dk:   #1E2F6F;    /* hover */
  --r-primary-soft: #DBE3F4;    /* tinted backgrounds (selected pill, badges) */
  --r-primary-faint:#EEF2FA;    /* faintest wash — info-card bg */

  /* Logo cyan — kept as a decorative tertiary, NEVER as a CTA color */
  --r-cyan:         #38BDF8;    /* sparingly: chart strokes, decorative arc, divider tick */
  --r-cyan-soft:    #E0F2FE;

  /* Semantic — used as text/badge color, not full-saturation CTA */
  --r-success:      #047857;    /* deep emerald — quieter than the original green */
  --r-success-soft: #ECFDF5;
  --r-warning:      #B45309;    /* dark amber */
  --r-warning-soft: #FFFBEB;
  --r-danger:       #B91C1C;    /* brick — used in text/destructive button */
  --r-danger-soft:  #FEF2F2;

  /* ── ACCENT PALETTE — categorical hues ──────────
     Three deliberate accents that join navy as a 4-color "designed palette".
     Each carries meaning: sage = giving/chesed, amber = sacred time,
     cyan = info/system. Never used in CTAs — only in surface tints, badges,
     kickers, avatars, decorative accents. */
  --r-sage:         #2F5C3D;    /* deep — text/icon on soft tint */
  --r-sage-mid:     #4A7C59;    /* mid — for chart strokes / accents */
  --r-sage-soft:    #ECF4EE;    /* faint surface — info-card bg */

  --r-amber-deep:   #92400E;    /* deep — text/icon on soft tint */
  --r-amber-mid:    #D97706;    /* mid — for accents */
  --r-amber-soft:   #FEF3C7;    /* faint surface (same as warning-soft, intentional) */

  --r-cyan-deep:    #0369A1;    /* deep — text/icon on soft tint */
  --r-cyan-mid:     #0EA5E9;    /* mid — chart strokes, hero arc */
  --r-cyan-faint:   #E0F2FE;    /* faint surface — info-card bg */

  /* ── TYPOGRAPHY — Heebo only, dialed down ─────── */
  --r-f-display: 'Heebo', system-ui, sans-serif;
  --r-f-body:    'Heebo', system-ui, sans-serif;
  --r-f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — slightly tighter than original, no clamp() display */
  --r-fs-micro:   0.75rem;
  --r-fs-small:   0.875rem;
  --r-fs-body:    0.9375rem;   /* 15px — admin-ready density */
  --r-fs-lead:    1.0625rem;
  --r-fs-h6:      1rem;
  --r-fs-h5:      1.125rem;
  --r-fs-h4:      1.375rem;
  --r-fs-h3:      1.625rem;
  --r-fs-h2:      2rem;
  --r-fs-h1:      2.5rem;
  --r-fs-display: 3rem;        /* fixed, not fluid — restraint */

  /* Weights — 700 ceiling. No 800/900 (those read "AI display") */
  --r-fw-reg:  400;
  --r-fw-med:  500;
  --r-fw-semi: 600;
  --r-fw-bold: 700;

  /* Optical letter-spacing */
  --r-tr-tight:  -0.018em;   /* headings */
  --r-tr-body:   -0.005em;
  --r-tr-caps:    0.06em;

  /* Line-height — generous body for readability */
  --r-lh-tight: 1.15;
  --r-lh-snug:  1.3;
  --r-lh-body:  1.6;
  --r-lh-loose: 1.75;

  /* ── SPACE — 4/8 base grid, no surprises ─────── */
  --r-s-1:  0.25rem;
  --r-s-2:  0.5rem;
  --r-s-3:  0.75rem;
  --r-s-4:  1rem;
  --r-s-5:  1.5rem;
  --r-s-6:  2rem;
  --r-s-7:  2.5rem;
  --r-s-8:  3rem;
  --r-s-9:  4rem;
  --r-s-10: 6rem;

  /* ── RADIUS — single scale, modest ─────── */
  --r-r-xs:   4px;
  --r-r-sm:   8px;
  --r-r-md:   10px;
  --r-r-lg:   14px;    /* the default card radius */
  --r-r-pill: 999px;

  /* ── SHADOW — flat by default, lift on interaction ─────── */
  --r-sh-none:  none;
  --r-sh-sm:    0 1px 2px rgba(15,23,42,0.04);
  --r-sh-md:    0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.05);
  --r-sh-lg:    0 4px 12px rgba(15,23,42,0.06), 0 20px 40px rgba(15,23,42,0.08);
  --r-sh-focus: 0 0 0 3px rgba(30,58,138,0.20);
  --r-sh-inset: inset 0 1px 0 rgba(15,23,42,0.02);

  /* ── MOTION — consistent timing function ─────── */
  --r-t-fast: 150ms;
  --r-t-base: 200ms;
  --r-t-slow: 320ms;
  --r-e:      cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint — confident */

  /* ── LAYOUT ─────── */
  --r-content-max:    72rem;
  --r-content-pad:    clamp(1rem, 4vw, 2rem);
  --r-hit-min:        40px;
  --r-hit-comfort:    44px;

  /* Signature gradient — much subtler than original */
  --r-bg-sky: linear-gradient(180deg, var(--r-sky-1) 0%, var(--r-sky-2) 60%, var(--r-surface) 100%);
}

/* Body background — calm sky, gradient still present but desaturated */
body.bg-refined { background: var(--r-bg-sky); min-height: 100vh; }