/* ============================================================================
   Tel-Chetz Design System — colors_and_type.css
   תל-חץ · Swiss Private Bank aesthetic for Haredi educational institutions
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;700;900&family=Heebo:wght@300;400;500;600;700;800;900&family=IBM+Plex+Sans+Hebrew:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Brand foundation ───────────────────────────────────────────────── */
  --navy:              #1C2B3A;  /* Deep graphite — primary brand */
  --navy-classic:      #1e3a5f;  /* Classic navy — text, primary buttons */
  --navy-light:        #243547;
  --navy-deep:         #0F1E33;  /* Sidebar */
  --navy-text:         #3d4f6f;

  --gold:              #C4922A;  /* Matte gold — earned, used sparingly */
  --gold-classic:      #c9a227;
  --gold-hover:        #b8911f;
  --gold-muted:        #F0E2C0;  /* Selection, soft fills */
  --gold-light:        #e9d89b;

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --bg:                #FAFAF7;  /* Off-white page */
  --bg-card:           #FFFFFF;
  --bg-muted:          #f1f5f9;  /* slate-100 */
  --bg-subtle:         #FAFAFA;
  --bg-amber-tint:     #FFFBF0;  /* action-zone tint */

  /* ── Foreground / text ─────────────────────────────────────────────── */
  --fg:                #1C1917;  /* stone-900 */
  --fg-strong:         #1A1A1A;
  --fg-2:              #475569;  /* slate-600 — muted-foreground, AAA on white */
  --fg-3:              #64748b;  /* slate-500 */
  --fg-4:              #94a3b8;  /* slate-400 — placeholders */
  --fg-on-dark:        #EEF2F7;
  --fg-on-dark-2:      rgba(238, 242, 247, 0.6);

  /* ── Borders ───────────────────────────────────────────────────────── */
  --border:            #e2e8f0;  /* slate-200 */
  --border-strong:     #cbd5e1;
  --border-subtle:     #f1f5f9;
  --border-gold:       rgba(196, 146, 42, 0.20);
  --border-navy-dark:  #1C2F4A;

  /* ── Semantic status ───────────────────────────────────────────────── */
  --success:           #059669;  /* emerald-600 */
  --success-bg:        #ecfdf5;
  --warning:           #d97706;  /* amber-600 */
  --warning-bg:        #fffbeb;
  --danger:            #dc2626;  /* red-600 */
  --danger-bg:         #fef2f2;
  --info:              #3b82f6;
  --info-bg:           #eff6ff;

  /* ── Event types (module color coding) ─────────────────────────────── */
  --event-meeting:           #c9a227;
  --event-assessment:        #3b82f6;
  --event-billing-paid:      #10b981;
  --event-billing-pending:   #ef4444;
  --event-attendance:        #8b5cf6;
  --event-task:              #f97316;
  --event-alert:             #ef4444;
  --event-report:            #06b6d4;
  --event-form:              #ec4899;

  /* ── Type system ───────────────────────────────────────────────────── */
  --font-sans:    "Heebo", "IBM Plex Sans Hebrew", system-ui, -apple-system, sans-serif;
  --font-serif:   "Frank Ruhl Libre", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — institutional hierarchy */
  --text-xs:        0.6875rem;  /* 11px — floor */
  --text-sm:        0.8125rem;  /* 13px */
  --text-base:      0.875rem;   /* 14px — body default */
  --text-md:        1rem;       /* 16px */
  --text-lg:        1.125rem;   /* 18px */
  --text-xl:        1.25rem;    /* 20px */
  --text-2xl:       1.5rem;     /* 24px */
  --text-3xl:       2rem;       /* 32px */
  --text-4xl:       2.5rem;     /* 40px */
  --text-5xl:       3.25rem;    /* 52px — hero */

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-editorial: 0.2em;  /* the signature editorial caps */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.55;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-sm:  0.25rem;  /* 4px */
  --radius-md:  0.5rem;   /* 8px — default */
  --radius-lg:  0.75rem;  /* 12px — inputs, cards sm */
  --radius-xl:  1rem;     /* 16px — event cards */
  --radius-2xl: 1.5rem;   /* 24px — hero */
  --radius-full: 9999px;

  /* ── Shadows (Swiss bank: refined, warm, restrained) ───────────────── */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
  --shadow-widget:      0 4px 24px rgba(28, 25, 23, 0.07), 0 1px 4px rgba(28, 25, 23, 0.04);
  --shadow-widget-hover: 0 12px 40px rgba(28, 25, 23, 0.12), 0 2px 8px rgba(28, 25, 23, 0.06);
  --shadow-gold:        0 4px 24px -4px rgba(196, 146, 42, 0.20), 0 2px 8px -2px rgba(196, 146, 42, 0.10);

  /* ── Spacing (4px grid) ────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Motion ────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
}

/* ============================================================================
   Base + semantic utilities
   ============================================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--navy-classic);
  line-height: var(--leading-tight);
  margin: 0;
}

h1, .h1 { font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: 1.08; }
h2, .h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h3, .h3 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h4, .h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); }
h5, .h5 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
h6, .h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); font-family: var(--font-sans); text-transform: none; }

p, .body { font-size: var(--text-base); line-height: var(--leading-body); color: var(--fg); }
.body-sm { font-size: var(--text-sm); line-height: 1.5; color: var(--fg); }
.muted { color: var(--fg-2); }
.muted-sm { color: var(--fg-2); font-size: var(--text-sm); }

/* Signature gold editorial caps — e.g. hebrew date above hero */
.editorial-caps {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-editorial);
  color: var(--gold);
  text-transform: none;
}

/* Tabular numerals — for stats, IDs, prices */
.tabular { font-variant-numeric: tabular-nums; }

/* Mono */
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ── Signature motifs ──────────────────────────────────────────────── */

/* Gold stripe — top border for cards */
.gold-stripe { position: relative; }
.gold-stripe::before {
  content: '';
  position: absolute; top: 0; inset-inline: 0;
  height: 2px;
  background: var(--gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0.8;
}

/* Gold side stripe — active nav items (RTL: right side) */
.gold-stripe-start { position: relative; }
.gold-stripe-start::before {
  content: '';
  position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 3px;
  background: var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Thin gold editorial rule — under headlines */
.gold-rule {
  height: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(to left, var(--gold), transparent);
}

/* Selection — gold muted */
::selection { background: var(--gold-muted); color: var(--fg); }