/* Taqadum HRMS — Design Tokens (Redesign) */
:root {
  /* Core palette — Plum / Sand / Ember */
  --bg: #F4EFE6;          /* warm sand */
  --bg-2: #EDE6D8;        /* deeper sand */
  --surface: #FFFCF6;     /* off-white card */
  --ink: #1A1410;         /* near-black ink */
  --ink-2: #3D342C;       /* secondary ink */
  --muted: #8A7F72;       /* warm muted */
  --line: #E4DACB;        /* hairline */
  --line-2: #D5C9B6;

  /* Brand primary — deep plum */
  --plum: #3B1F3F;
  --plum-2: #5A2E5E;
  --plum-ink: #FFFCF6;

  /* Accent — ember orange */
  --ember: #E0572B;
  --ember-soft: #F8E0D2;
  --ember-ink: #5A1F0C;

  /* Accent — moss green */
  --moss: #4A6B3A;
  --moss-soft: #E1E9D5;

  /* Accent — ochre */
  --ochre: #C68A2E;
  --ochre-soft: #F4E5C6;

  /* Semantic */
  --danger: #B1372A;
  --danger-soft: #F5DDD8;

  /* Hero dark gradients for attendance */
  --hero-away-a: #1C1118;     --hero-away-b: #3B1F3F;
  --hero-arriving-a: #3A1E0A; --hero-arriving-b: #7A4A1A;
  --hero-in-a: #112318;       --hero-in-b: #2D4A32;
  --hero-leaving-a: #3A1808;  --hero-leaving-b: #8A3A1A;
  --hero-remote-a: #1A1027;   --hero-remote-b: #3D2363;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body { margin: 0; font-family: 'Inter', system-ui, sans-serif; }

.serif { font-family: 'Instrument Serif', 'Times New Roman', serif; letter-spacing: -0.01em; }
.mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.screen {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.screen::-webkit-scrollbar { display: none; }

.pad { padding: 0 20px; }
.caps { text-transform: uppercase; letter-spacing: 0.09em; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.hair { height: 1px; background: var(--line); }
.card { background: var(--surface); border-radius: 20px; border: 1px solid var(--line); }

/* tap scale */
.tap { transition: transform 120ms ease; }
.tap:active { transform: scale(0.96); }

/* shimmer */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg, #E4DACB 0%, #EFE6D7 50%, #E4DACB 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
}

/* RTL */
[dir="rtl"] { font-family: 'Inter', system-ui, sans-serif; }
[dir="rtl"] .serif { font-family: 'Amiri', 'Instrument Serif', serif; }