/* Sainik Desk — base tokens. Colours from the owner's FINAL design (2026-08-02):
   navy + orange on a light grey page, white cards. */

:root {
  --navy: #1C2E54;          /* headings, nav text, dark cards */
  --navy-2: #24396B;
  --navy-deep: #14213D;     /* footer, feature strip */
  --navy-tint: #EDF1F8;

  --orange: #F47B20;        /* icons, accents, highlights */
  --orange-btn: #E56A00;    /* buttons — slightly deeper so white text reads */
  --orange-tint: #FDEEDF;

  --page: #F4F6F9;          /* page background */
  --surface: #FFFFFF;
  --border: #E3E7EE;

  --ink: #1A2333;
  --muted: #5A6579;
  --muted-2: #8B94A6;       /* decorative only — never body text */

  --soon-bg: #FDF3E3; --soon: #96500A;
  --plan-bg: #ECEEF2;
  --error: #B3261E;
  --tile-live: #EAF3EC; --live: #1F6B33;

  --radius: 14px;
  --radius-s: 10px;
  --measure: 44rem;
  --colw: 72rem;

  --shadow: 0 1px 2px rgba(20, 33, 61, .05), 0 6px 18px rgba(20, 33, 61, .07);
  --shadow-lift: 0 2px 4px rgba(20, 33, 61, .08), 0 14px 34px rgba(20, 33, 61, .14);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
}

img, svg { max-width: 100%; height: auto; }
svg { flex: none; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 60;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Icon slots — the owner supplies the icons.
   Save each file as site/assets/img/icons/<data-icon>.png and it appears
   automatically. Until then the slot shows a dashed placeholder; a missing
   file never breaks the page, because this is a background, not an <img>. */
.icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1.5px dashed #C8CFDB;
  border-radius: 12px;
  background: #FAFBFD center / contain no-repeat;
}
.icon-slot[data-icon] { background-image: var(--icon); }
.icon-slot.has-icon { border-color: transparent; background-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}