/* SuperNova Design System — tokens
 * Mobile-first, RTL-first, dark-only.
 * All px (not rem) so the calendar grid stays predictable.
 */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ─── Surfaces (dark only) ─────────────────────────────────────── */
  --surface-0: #0B1220;   /* page background, deepest navy */
  --surface-1: #141C2B;   /* default card */
  --surface-2: #1C2638;   /* raised / hover */
  --surface-3: #22304A;   /* popover / menu */
  --surface-scrim: rgba(11, 18, 32, 0.72);

  /* ─── Foreground (text) ────────────────────────────────────────── */
  --fg-1: #F2F4F8;        /* primary text, near-white */
  --fg-2: #A4ADBE;        /* secondary, meta */
  --fg-3: #5C6679;        /* tertiary, ghost / placeholder */
  --fg-on-accent: #06231F;/* text on accent fills */

  /* ─── Accent (single, deliberate) ──────────────────────────────── */
  --accent: #5CC8C2;
  --accent-hover: #6FD4CE;
  --accent-press: #4FB6B0;
  --accent-soft: rgba(92, 200, 194, 0.14);
  --accent-ring: rgba(92, 200, 194, 0.40);

  /* ─── Admin / control-panel tint ───────────────────────────────── */
  --admin: #6B8AB8;
  --admin-soft: rgba(107, 138, 184, 0.14);
  --admin-border: rgba(107, 138, 184, 0.22);

  /* ─── Semantic ─────────────────────────────────────────────────── */
  --success: #5BB98C;
  --success-soft: rgba(91, 185, 140, 0.14);
  --warning: #E8B770;
  --warning-soft: rgba(232, 183, 112, 0.14);
  --danger: #E07A7A;
  --danger-soft: rgba(224, 122, 122, 0.14);

  /* ─── Shift-code colors (semantic) ─────────────────────────────────
   * Six codes from `app/common/unit_codebook.py`. Three hue families with
   * a primary + a support tone in each. All filled (no outlines) so every
   * code reads at the same weight in dense calendar grids.
   *   amber  family = morning   (ב primary,  תב support)
   *   blue   family = afternoon (צ primary,  תצ support)  ← also echoes the brand "nova" star
   *   indigo family = night     (ל primary,  תלמ support)
   */
  --shift-boker: #F4B860;        /* בוקר — sunrise amber */
  --shift-boker-soft: rgba(244, 184, 96, 0.14);
  --shift-boker-line: rgba(244, 184, 96, 0.36);

  --shift-tomech-boker: #E89A55;     /* תמך בוקר — warmer amber/peach, distinct from parent */
  --shift-tomech-boker-soft: rgba(232, 154, 85, 0.14);
  --shift-tomech-boker-line: rgba(232, 154, 85, 0.36);

  --shift-tzohorayim: #7DA9D8;   /* צהריים — afternoon blue */
  --shift-tzohorayim-soft: rgba(125, 169, 216, 0.14);
  --shift-tzohorayim-line: rgba(125, 169, 216, 0.36);

  --shift-tomech-tzohorayim: #5BC0D8;   /* תמך צהריים — cyan-leaning blue */
  --shift-tomech-tzohorayim-soft: rgba(91, 192, 216, 0.14);
  --shift-tomech-tzohorayim-line: rgba(91, 192, 216, 0.36);

  --shift-layla: #8B7DD8;        /* לילה — night indigo */
  --shift-layla-soft: rgba(139, 125, 216, 0.14);
  --shift-layla-line: rgba(139, 125, 216, 0.36);

  --shift-tomech-layla: #B886D6;     /* תמך לילה — magenta-leaning purple */
  --shift-tomech-layla-soft: rgba(184, 134, 214, 0.14);
  --shift-tomech-layla-line: rgba(184, 134, 214, 0.36);

  /* ─── Spacing (4px grid) ───────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ─── Radii ────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;   /* signature card radius */
  --r-xl: 24px;
  --r-full: 999px;

  /* ─── Borders / dividers ───────────────────────────────────────── */
  --hairline: 1px solid rgba(255, 255, 255, 0.06);
  --hairline-strong: 1px solid rgba(255, 255, 255, 0.10);
  --border-input: 1px solid var(--surface-2);
  --border-input-focus: 1px solid var(--accent);

  /* ─── Shadows / elevation ──────────────────────────────────────── */
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-card-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 32px -12px rgba(0, 0, 0, 0.6);
  --shadow-sheet:
    0 -8px 32px -8px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px var(--accent-ring);

  /* ─── Type ─────────────────────────────────────────────────────── */
  --font-sans: "Heebo", system-ui, -apple-system, "Segoe UI", "Arial Hebrew", sans-serif;
  --font-mono: "Heebo", ui-monospace, Menlo, Consolas, monospace;
                /* Heebo + tabular-nums acts as our mono for shift codes / times */

  --t-display-size: 32px; --t-display-line: 1.15; --t-display-weight: 700;
  --t-h1-size: 24px;      --t-h1-line: 1.20;      --t-h1-weight: 700;
  --t-h2-size: 20px;      --t-h2-line: 1.25;      --t-h2-weight: 600;
  --t-h3-size: 17px;      --t-h3-line: 1.30;      --t-h3-weight: 600;
  --t-body-size: 15px;    --t-body-line: 1.50;    --t-body-weight: 400;
  --t-meta-size: 13px;    --t-meta-line: 1.40;    --t-meta-weight: 500;
  --t-micro-size: 11px;   --t-micro-line: 1.30;   --t-micro-weight: 600;
  --t-mono-size: 14px;    --t-mono-line: 1.0;     --t-mono-weight: 600;

  /* ─── Motion ───────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 80ms;
  --dur-base: 150ms;
  --dur-slow: 220ms;

  /* ─── Layout ───────────────────────────────────────────────────── */
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 40px;
  --topbar-height: 56px;
  --bottomnav-height: 64px;
  --content-max: 960px;
}

/* ─── Base / reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-weight: var(--t-body-weight);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }

/* ─── Semantic type classes ────────────────────────────────────────── */
.t-display {
  font-size: var(--t-display-size);
  line-height: var(--t-display-line);
  font-weight: var(--t-display-weight);
  letter-spacing: -0.01em;
}
.t-h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-line); font-weight: var(--t-h1-weight); }
.t-h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-line); font-weight: var(--t-h2-weight); }
.t-h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-line); font-weight: var(--t-h3-weight); }
.t-body { font-size: var(--t-body-size); line-height: var(--t-body-line); font-weight: var(--t-body-weight); }
.t-meta { font-size: var(--t-meta-size); line-height: var(--t-meta-line); font-weight: var(--t-meta-weight); color: var(--fg-2); }
.t-micro { font-size: var(--t-micro-size); line-height: var(--t-micro-line); font-weight: var(--t-micro-weight); letter-spacing: 0.04em; text-transform: none; }
.t-mono {
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-line);
  font-weight: var(--t-mono-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }

/* ─── Common surface helpers (handy in slides + UI kit) ────────────── */
.card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-card);
}
.card--admin {
  border: 1px solid var(--admin-border);
}

/* Shift-code badge — square, fixed-width, mono digits/letters */
.code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--s-2);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}
.code-badge--boker { background: var(--shift-boker-soft); color: var(--shift-boker); }
.code-badge--tomech-boker { background: var(--shift-tomech-boker-soft); color: var(--shift-tomech-boker); }

.code-badge--tzohorayim { background: var(--shift-tzohorayim-soft); color: var(--shift-tzohorayim); }
.code-badge--tomech-tzohorayim { background: var(--shift-tomech-tzohorayim-soft); color: var(--shift-tomech-tzohorayim); }

.code-badge--layla { background: var(--shift-layla-soft); color: var(--shift-layla); }
.code-badge--tomech-layla { background: var(--shift-tomech-layla-soft); color: var(--shift-tomech-layla); }

/* Width override for 2-character support codes (תב, תצ, תלמ) */
.code-badge--wide { min-width: 44px; padding: 0 6px; font-size: 14px; }

/* Pill / chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 28px;
  padding: 0 var(--s-3);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--fg-2);
  font-size: var(--t-meta-size);
  font-weight: 500;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 44px;
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  border: 0;
  background: var(--surface-2);
  color: var(--fg-1);
  font-family: inherit;
  font-size: var(--t-body-size);
  font-weight: 600;
  transition:
    background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary { background: var(--accent); color: var(--fg-on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); }

.btn--ghost { background: transparent; color: var(--fg-1); }
.btn--ghost:hover { background: var(--surface-2); }

.btn--danger { background: var(--danger-soft); color: var(--danger); }

/* Input */
.input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 var(--s-3);
  background: var(--surface-1);
  border: var(--border-input);
  border-radius: var(--r-md);
  color: var(--fg-1);
  font-family: inherit;
  font-size: var(--t-body-size);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.input::placeholder { color: var(--fg-3); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

/* Divider */
.hr { height: 1px; background: rgba(255, 255, 255, 0.06); border: 0; margin: var(--s-3) 0; }

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%       { opacity: 1;    transform: scale(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Live-shift attention loop — used by .live-card border + .live-dot.
   Gentler than alarm-red: glow is the focus, border is steady-thin. */
@keyframes live-glow {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--danger), 0 0 14px -2px rgba(224, 122, 122, 0.35); }
  50%      { box-shadow: 0 0 0 1.5px var(--danger), 0 0 24px  0px rgba(224, 122, 122, 0.65); }
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}

.live-card {
  position: relative;
  animation: live-glow 1.8s var(--ease-out) infinite;
  border-radius: var(--r-lg);
}

.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  background: rgba(224, 122, 122, 0.14); color: var(--danger);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.live-pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger);
  animation: live-pulse 1.2s ease-in-out infinite;
}

/* "מתרחש עכשיו" eyebrow above the next-shift card on home. Strong red text
   without the glow — so the card itself owns the visual hit. */
.live-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--danger); text-transform: uppercase;
}
.live-eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  animation: live-pulse 1.2s ease-in-out infinite;
}

/* Skeletons — uniform loading shimmer.
   Slower + subtler than v1: 1.6s cycle, ±15% lightness only. */
@keyframes skeleton-shimmer {
  0%   { background-position: -240px 0; }
  100% { background-position:  240px 0; }
}
.sk {
  display: block;
  background: linear-gradient(90deg,
    var(--surface-1) 0%,
    var(--surface-2) 45%,
    var(--surface-2) 55%,
    var(--surface-1) 100%);
  background-size: 480px 100%;
  background-repeat: no-repeat;
  border-radius: 8px;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.sk-card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow-card);
}
.sk-circle { border-radius: 50%; }

/* Reduced motion: never blink, never shimmer. */
@media (prefers-reduced-motion: reduce) {
  .live-card, .live-pill::before, .live-eyebrow::before { animation: none; }
  .sk { animation: none; opacity: 0.7; }
}