@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Cairo:wght@400;600;700;900&family=Changa:wght@500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/* Kawader Film Camp 2026 · App design tokens
   Extracted from the live application form (docs/filmcamp/apply), the camp's dossier identity.
   Source of truth for the companion app UI. */

:root {
  /* ── Brand tokens (canonical) ── */
  --bg: #15130f;
  --surface: #15130f;
  --surface-2: #1d1a14;
  --border: #302a20;

  --text: #f3ead7;
  --text-muted: #b9b0a0;
  --text-dim: #837b6e;

  --amber: #f6ad4e;
  --amber-deep: #f0a23c;
  --amber-dark: #c97f24;
  --coral: #f08a8a;
  --slate: #6f8e98;
  --slate-dark: #3d5159;

  --font-body: 'Tajawal', system-ui, sans-serif;
  --font-display: 'Changa', 'Cairo', sans-serif;
  --font-mono: 'Space Grotesk', monospace;
  --font-ar: 'Tajawal', 'Cairo', sans-serif;

  /* ── Backward-compatible aliases (old variable names) ── */
  --bg-deep: #15130f;
  --bg-panel: #15130f;
  --bg-elev: #1d1a14;
  --bg-card: #1d1a14;
  --bg-hover: #252017;
  --bg-overlay: rgba(21,19,15,0.94);
  --line: #302a20;
  --line-strong: #4a4030;
  --ink: #f3ead7;
  --ink-muted: #b9b0a0;
  --ink-dim: #837b6e;
  --signal-amber: #f6ad4e;
  --signal-amber-dim: #c97f24;
  --signal-amber-bg: rgba(246,173,78,0.08);
  --signal-amber-glow: rgba(246,173,78,0.08);
  --tactical: #6dd58c;
  --tactical-dim: #2d6b42;
  --tactical-bg: rgba(109,213,140,0.08);
  --film-red: #f08a8a;
  --film-red-dim: #8a4545;
  --film-red-bg: rgba(240,138,138,0.08);
  --film-blue: #6f8e98;
  --film-blue-dim: #3d5159;
  --film-purple: #8f43a3;
  --film-purple-dim: #562760;
  --info-blue: #6f8e98;
  --info-blue-dim: #3d5159;
  --secret-purple: #8f43a3;
  --secret-purple-dim: #562760;
  --milestone-gold: #f0a23c;

  /* ── PDF handover geometry and material ── */
  --radius: 2px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  --shadow-panel: 0 18px 54px rgba(0,0,0,0.28);
  --tracking-label: 0.16em;
}

html.i18n-switching body {
  transition: opacity .18s ease, transform .22s ease;
}
html.i18n-switching.i18n-out body {
  opacity: .38;
  transform: translateX(var(--i18n-shift, 10px));
}
@media (prefers-reduced-motion: reduce) {
  html.i18n-switching body { transition: none; }
}

html {
  color-scheme: dark;
  background: var(--bg-deep);
}

body {
  color: var(--ink);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(circle at 92% -12%, rgba(143,67,163,0.10), transparent 34rem),
    radial-gradient(circle at 8% 10%, rgba(246,173,78,0.055), transparent 28rem),
    linear-gradient(rgba(21,19,15,0.94), rgba(21,19,15,0.94)),
    url('../../src/assets/theme/01-tex-grain-field.png');
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: 100% 100%, 100% 100%, auto, 640px auto;
  background-attachment: fixed, fixed, scroll, scroll;
  background-blend-mode: normal, normal, normal, soft-light;
}

::selection {
  background: var(--signal-amber);
  color: var(--bg-deep);
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--signal-amber);
  outline-offset: 3px;
}

/* Shared component voice from the design handover: printed, squared, precise. */
:where(.btn, .hud-btn, .back-btn, .logout-btn, .topbar-schedule-btn,
  .tree-ctrl, .login-btn, .day-tab, .filter-chip, .nav-item) {
  border-radius: var(--radius-sm) !important;
}

:where(.passport-card, .stat-card, .session-card, .day-section, .mission-card,
  .ach-item, .card, .team-card, .modal, .modal-box, .panel, .sidebar) {
  border-radius: var(--radius) !important;
}

:where(.passport-card, .stat-card, .session-card, .day-section, .mission-card,
  .ach-item, .card, .team-card, .modal, .modal-box, .panel) {
  box-shadow: none !important;
}

:where(.section-title, .topbar-title, .day-header-title, .sc-title,
  .mission-title, .ach-title, .card-title, .team-card h2) {
  color: var(--ink);
}

:where(.stamp-label, .day-label, .slot-label, .sc-type-badge, .mission-badge,
  .card-status, .nav-section, .mm-label) {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
}

:lang(ar) :where(.section-title, .day-header-title, .sc-title, .mission-title,
  .ach-title, .card-title, .team-card h2) {
  letter-spacing: 0;
}

/* Usage rules (keep it this simple):
   1. Dark warm base everywhere; cream text.
   2. Amber is the ONLY action color. Coral is for alerts and warnings only.
   3. Tajawal for body, Changa/Cairo for headlines, Space Grotesk for codes and numbers.
   RTL first: <html lang="ar" dir="rtl">, flip only when language switch is EN. */

.lang-btn-glyph {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--signal-amber);
}

[data-action="toggle-language"] {
  border-color: var(--signal-amber-dim);
  color: var(--signal-amber);
}

[data-action="toggle-language"]:hover {
  background: var(--signal-amber-bg);
  border-color: var(--signal-amber);
}

/* Bidi utilities. Numbers, clock times, ranges and IDs sit inside RTL prose all
   over the app; .ltr-num isolates them so "14:00–15:30" cannot render reversed.
   Was private to dashboard.html until 2026-08-11. */
.ltr-num {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
}
.ltr-num--tab { font-variant-numeric: tabular-nums; }