/* ============================================================
   מכללת קגן — פריסט מותג (token-driven)
   הצבעים נשאבו מ-nlp2u.com החי (2026-07-12), לא הומצאו.
   החלפת פלטה = הקובץ הזה בלבד. לא נוגעים בפריסה.
   ============================================================ */

:root {
  /* --- מותג קגן --- */
  --brand-ink:        #0C0F1A;  /* נייבי עמוק — הצבע הדומיננטי באתר */
  --brand-ink-2:      #0F1431;
  --brand-surface:    #1C2233;  /* כרטיסים כהים */
  --brand-accent:     #FF9800;  /* כתום קגן — CTA */
  --brand-accent-2:   #F38132;  /* כתום חם משני — גרדיאנט */
  --brand-mist:       #E6EBF3;  /* תכלת-אפור בהיר */
  --brand-muted:      #6B7390;
  --brand-white:      #FFFFFF;

  /* --- סמנטי (הפריסה משתמשת רק באלה) --- */
  --bg:            var(--brand-mist);
  --bg-elev:       var(--brand-white);
  --bg-sunken:     #F4F7FB;
  --text:          var(--brand-ink);
  --text-soft:     var(--brand-muted);
  --text-invert:   var(--brand-white);
  --accent:        var(--brand-accent);
  --accent-hover:  var(--brand-accent-2);
  --accent-ink:    #1A1206;      /* טקסט על כתום — ניגודיות AA */
  --border:        #D7DEE9;
  --ring:          rgba(255, 152, 0, .38);

  --ok:      #1E7F4F;
  --warn:    #B7791F;
  --danger:  #C0392B;

  /* --- טיפוגרפיה — Assistant הוא הפונט של האתר שלו --- */
  --font-ui: "Assistant", system-ui, -apple-system, "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
  --font-display: "Assistant", var(--font-ui);

  --step--1: clamp(.82rem, .78rem + .2vw, .9rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 2.9rem);

  /* --- פריסה --- */
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --shadow:    0 1px 2px rgba(12,15,26,.06), 0 8px 24px rgba(12,15,26,.08);
  --shadow-lg: 0 24px 60px rgba(12,15,26,.16);
  --maxw: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --grad-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-2) 100%);
  --grad-ink:    linear-gradient(165deg, var(--brand-ink) 0%, var(--brand-ink-2) 100%);
}

/* מצב כהה — פורטל למידה נצפה גם בלילה. ראה feedback_dashboard_dark_and_light_mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #080A12;
    --bg-elev:   var(--brand-surface);
    --bg-sunken: #12172A;
    --text:      #EDF1F7;
    --text-soft: #99A2BC;
    --border:    #2A3149;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg:        #080A12;
  --bg-elev:   var(--brand-surface);
  --bg-sunken: #12172A;
  --text:      #EDF1F7;
  --text-soft: #99A2BC;
  --border:    #2A3149;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.5);
}

/* ---------- בסיס RTL ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  direction: rtl;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: var(--step-3); letter-spacing: -.02em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 1em; }
a  { color: inherit; }
img, svg, video, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* מספרים ולטינית בתוך RTL — למנוע היפוך */
.ltr, time, .num { direction: ltr; unicode-bidi: isolate; }

/* פוקוס נראה — נגישות */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- פרימיטיבים משותפים ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--grad-accent); color: var(--accent-ink); box-shadow: 0 6px 20px var(--ring); }
.btn--primary:hover { box-shadow: 0 10px 28px var(--ring); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn--ghost:hover { background: var(--bg-sunken); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* color מפורש ולא בירושה — קריטי.
   כרטיס שיושב בתוך ה-hero (רקע כהה, color: var(--text-invert)) ירש טקסט לבן
   על רקע לבן, וכל טקסט בלי צבע משלו פשוט נעלם. כך קרה בטופס ההרשמה בדף
   הנחיתה: הכותרת "קבלת גישה לקורס" ותוויות השדות היו בלתי נראות באוויר
   (אומת חזותית 2026-07-27). הכרטיס מגדיר רקע, ולכן חייב להגדיר גם טקסט. */
.card {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

/* מד-התקדמות */
.progress { height: 8px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; border: 1px solid var(--border); }
.progress > i { display: block; height: 100%; background: var(--grad-accent); border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: var(--accent-ink); padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { inset-inline-start: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}