/* ═══════════════════════════════════════════════════════════════
   VITRUVIUS DESIGN LANGUAGE — v2.1
   Architectural Blueprint Style
   ─────────────────────────────────────────────────────────────
   פונטים: Rubik (עברית, גיאומטרי), Share Tech Mono (תוויות טכניות)
   סגנון: שרטוט אדריכלי — קווים, אנוטציות, לא עיצוב גרפי
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&family=Share+Tech+Mono&family=Heebo:wght@300&display=swap');

/* ──────────────────────────────────────────
   DESIGN TOKENS
   ────────────────────────────────────────── */
:root {

  /* Backgrounds */
  --vit-bg:           #0D0D0B;
  --vit-surface:      #1A1A17;
  --vit-surface-low:  #161613;
  --vit-surface-sub:  #181816;

  /* Text — warm off-white, high contrast */
  --vit-text:         #EDEAE4;
  --vit-text-muted:   #C0BCB5;
  --vit-text-faint:   #8E8980;
  --vit-text-ghost:   #524D48;

  /* ── Category Colors — full saturation ── */
  --vit-ecosystem:    #26C6DA;   /* teal            */
  --vit-professional: #4A90D9;   /* blue            */
  --vit-family:       #E8A838;   /* amber           */
  --vit-personal:     #5CB85C;   /* green           */
  --vit-financial:    #9B59B6;   /* purple          */
  --vit-health:       #E05C5C;   /* red             */

  /* ── Line System ── */
  --vit-line:         rgba(184,179,160,0.10);
  --vit-line-med:     rgba(184,179,160,0.18);
  --vit-line-strong:  rgba(184,179,160,0.32);
  --vit-line-weight:  0.5px;

  /* ── Shapes — sharp corners, like drafted elements ── */
  --vit-radius-node: 2px;
  --vit-radius-card: 1px;
  --vit-radius-pill: 2px;

  /* ── Typography ── */
  --vit-font-display: 'Rubik', sans-serif;
  --vit-font-body:    'Share Tech Mono', 'Courier New', monospace;
  --vit-font-hebrew:  'Rubik', sans-serif;
  --vit-font-light:   'Heebo', sans-serif;

  /* ── Spacing ── */
  --vit-gap-xs:  5px;
  --vit-gap-sm:  10px;
  --vit-gap-md:  16px;
  --vit-gap-lg:  24px;
  --vit-gap-xl:  42px;

  --vit-transition: all 0.2s ease;
}

/* ──────────────────────────────────────────
   BASE
   ────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background-color: var(--vit-bg);
  color: var(--vit-text);
  font-family: var(--vit-font-light);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;

  background-image:
    linear-gradient(rgba(184,179,160,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,179,160,0.022) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ──────────────────────────────────────────
   TYPOGRAPHY
   ────────────────────────────────────────── */

.vit-title {
  font-family: var(--vit-font-display);
  font-size: 52px;
  font-weight: 500;
  color: var(--vit-text);
  letter-spacing: 0.10em;
  text-align: center;
}

.vit-subtitle {
  font-family: var(--vit-font-body);
  font-size: 18px;
  color: var(--vit-text-muted);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-align: center;
}

.vit-label {
  font-family: var(--vit-font-body);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vit-text-faint);
}

.vit-watermark {
  font-family: var(--vit-font-body);
  font-size: 16px;
  color: var(--vit-text-ghost);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

/* ──────────────────────────────────────────
   CONTAINERS
   ────────────────────────────────────────── */

.vit-column {
  background: rgba(255,255,255,0.022);
  border: var(--vit-line-weight) solid var(--vit-line-med);
  border-radius: var(--vit-radius-card);
  padding: var(--vit-gap-lg) 14px;
  position: relative;
}

.vit-subsection {
  background: rgba(255,255,255,0.016);
  border: var(--vit-line-weight) solid var(--vit-line-med);
  border-radius: var(--vit-radius-card);
  padding: 11px 10px;
  margin-bottom: 9px;
}

.vit-subsection:last-child { margin-bottom: 0; }

.vit-subsection-label {
  font-family: var(--vit-font-body);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 9px;
  opacity: 0.85;
}

/* ──────────────────────────────────────────
   NODES
   ────────────────────────────────────────── */

.vit-node {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--vit-surface);
  border-radius: var(--vit-radius-node);
  padding: 9px 14px;
  margin-bottom: 7px;
  border: var(--vit-line-weight) solid transparent;
  transition: var(--vit-transition);
  position: relative;
}

.vit-node:last-child { margin-bottom: 0; }

/* ── Color variants ── */
.vit-node--ecosystem   { border-color: rgba(38,198,218,0.50);  box-shadow: 0 0 12px rgba(38,198,218,0.10); }
.vit-node--professional{ border-color: rgba(74,144,217,0.50);  box-shadow: 0 0 12px rgba(74,144,217,0.10); }
.vit-node--family      { border-color: rgba(232,168,56,0.50);  box-shadow: 0 0 12px rgba(232,168,56,0.10); }
.vit-node--personal    { border-color: rgba(92,184,92,0.50);   box-shadow: 0 0 12px rgba(92,184,92,0.10);  }
.vit-node--financial   { border-color: rgba(155,89,182,0.50);  box-shadow: 0 0 12px rgba(155,89,182,0.10); }
.vit-node--health      { border-color: rgba(224,92,92,0.50);   box-shadow: 0 0 12px rgba(224,92,92,0.10);  }

.vit-node--ecosystem:hover   { border-color: rgba(38,198,218,0.80); box-shadow: 0 0 20px rgba(38,198,218,0.20); }
.vit-node--professional:hover{ border-color: rgba(74,144,217,0.80); box-shadow: 0 0 20px rgba(74,144,217,0.20); }
.vit-node--family:hover      { border-color: rgba(232,168,56,0.80); box-shadow: 0 0 20px rgba(232,168,56,0.20); }
.vit-node--personal:hover    { border-color: rgba(92,184,92,0.80);  box-shadow: 0 0 20px rgba(92,184,92,0.20);  }
.vit-node--financial:hover   { border-color: rgba(155,89,182,0.80); box-shadow: 0 0 20px rgba(155,89,182,0.20); }
.vit-node--health:hover      { border-color: rgba(224,92,92,0.80);  box-shadow: 0 0 20px rgba(224,92,92,0.20);  }

.vit-node--main {
  padding: 14px 20px;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  margin-bottom: 14px;
}

.vit-node-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 26px;
  text-align: center;
  opacity: 0.38;
}

.vit-node-name {
  font-family: var(--vit-font-body);
  font-size: 23px;
  font-weight: 400;
  color: var(--vit-text);
  letter-spacing: 0.04em;
}

.vit-node-desc {
  font-family: var(--vit-font-light);
  font-weight: 300;
  font-size: 20px;
  color: var(--vit-text-muted);
  margin-top: 3px;
  line-height: 1.4;
}

.vit-node--main .vit-node-name {
  font-family: var(--vit-font-display);
  font-size: 25px;
  font-weight: 500;
  color: #2AABB8;
  letter-spacing: 0.08em;
}
.vit-node--main .vit-node-desc {
  color: var(--vit-text-muted);
  font-size: 18px;
}

/* ──────────────────────────────────────────
   COLUMN HEADER
   ────────────────────────────────────────── */

.vit-col-bubble {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: var(--vit-line-weight) solid var(--vit-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vit-font-body);
  font-size: 16px;
  color: var(--vit-text-faint);
  margin: 0 auto 10px;
  letter-spacing: 0;
}

.vit-col-title {
  font-family: var(--vit-font-body);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vit-text-muted);
  text-align: center;
  margin-bottom: 3px;
}

.vit-col-subtitle {
  font-family: var(--vit-font-light);
  font-weight: 300;
  font-size: 20px;
  color: var(--vit-text-faint);
  text-align: center;
  margin-bottom: 20px;
}

/* ──────────────────────────────────────────
   FOLDER CARDS
   ────────────────────────────────────────── */

.vit-folders-row {
  background: rgba(255,255,255,0.008);
  border: var(--vit-line-weight) solid var(--vit-line-med);
  border-radius: var(--vit-radius-card);
  padding: 18px 16px;
}

.vit-folders-header {
  font-family: var(--vit-font-body);
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(38, 198, 218, 0.80);
  text-align: center;
  margin-bottom: 14px;
}

.vit-folder-card {
  background: var(--vit-surface);
  border: var(--vit-line-weight) solid rgba(38,198,218,0.18);
  border-radius: var(--vit-radius-card);
  padding: 11px 12px;
  transition: var(--vit-transition);
}

.vit-folder-card:hover {
  border-color: rgba(38,198,218,0.4);
  box-shadow: 0 0 10px rgba(38,198,218,0.07);
}

.vit-folder-path {
  font-family: var(--vit-font-body);
  font-size: 18px;
  color: rgba(38, 198, 218, 0.90);
  letter-spacing: 0.03em;
  margin-bottom: 5px;
  word-break: break-all;
}

.vit-folder-desc {
  font-family: var(--vit-font-light);
  font-weight: 300;
  font-size: 18px;
  color: var(--vit-text-muted);
  line-height: 1.45;
}

/* ──────────────────────────────────────────
   LEGEND
   ────────────────────────────────────────── */

.vit-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.vit-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--vit-font-body);
  font-size: 16px;
  color: var(--vit-text-faint);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vit-legend-line {
  width: 20px;
  height: var(--vit-line-weight);
}

.vit-legend-dash {
  width: 20px;
  height: var(--vit-line-weight);
  background: repeating-linear-gradient(
    90deg,
    currentColor 0, currentColor 4px,
    transparent 4px, transparent 8px
  );
}

/* ──────────────────────────────────────────
   TITLE BLOCK
   ────────────────────────────────────────── */

.vit-title-block {
  border: var(--vit-line-weight) solid var(--vit-line-med);
  border-radius: var(--vit-radius-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-family: var(--vit-font-body);
  overflow: hidden;
  min-width: 220px;
}

.vit-tb-cell {
  padding: 6px 10px;
  border-bottom: var(--vit-line-weight) solid var(--vit-line);
  border-right: var(--vit-line-weight) solid var(--vit-line);
}

.vit-tb-cell:nth-child(even) { border-right: none; }
.vit-tb-cell:nth-last-child(-n+2) { border-bottom: none; }

.vit-tb-label {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vit-text-faint);
  display: block;
  margin-bottom: 2px;
}

.vit-tb-value {
  font-size: 18px;
  color: var(--vit-text-muted);
  letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────
   COLOR TEXT UTILITIES
   ────────────────────────────────────────── */
.vit-c-ecosystem   { color: var(--vit-ecosystem); }
.vit-c-professional{ color: var(--vit-professional); }
.vit-c-family      { color: var(--vit-family); }
.vit-c-personal    { color: var(--vit-personal); }
.vit-c-financial   { color: var(--vit-financial); }
.vit-c-health      { color: var(--vit-health); }