/* Salyco design tokens, from Design.md v2.
 *
 * This file is the single source of truth for the palette. It is plain CSS
 * custom properties rather than Tailwind's @theme because the article pages are
 * Django templates, which cannot compile Tailwind — and duplicating the hex
 * values into a second stylesheet would drift silently on the next brand tweak.
 *
 * src/index.css maps Tailwind's names onto these; nginx serves this file from
 * the SPA root at /tokens.css, exactly as it already serves /fonts/.
 *
 * Nothing here defines a value: every declaration is a literal. A var() that
 * pointed at another var() would move the question of where the palette lives
 * one file further along instead of answering it.
 *
 * The @font-face blocks live here for the same reason the palette does, and
 * they are the type half of that argument rather than a bolt-on. They used to
 * sit in src/index.css, which is bundled into the SPA's stylesheet — so the
 * Django-rendered article pages, which link this file and nothing else, asked
 * for "Vazirmatn" against zero declared faces and silently rendered in the
 * OS fallback. Measured: document.fonts was empty on /articles/ while the
 * React home page had five faces loaded. One file both halves load, one type
 * stack, no second copy to drift.
 *
 * src/index.css no longer declares these. Do not add them back: a duplicate
 * @font-face wins over the earlier one, so the copy that survives would be the
 * one the article pages never fetch. */
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --salyco-navy: #052e5f;
  --salyco-white: #ffffff;
  --salyco-warm-white: #f7f5f0;
  --salyco-mist: #e4e5e2;
  --salyco-action-hover: #032247;
  --salyco-text-primary: #1c2b3a;
  --salyco-text-secondary: #526171;
  --salyco-border-control: #788594;
  --salyco-status-success: #21633e;
  --salyco-status-success-bg: #eef7f0;
  --salyco-status-warning: #81520b;
  --salyco-status-warning-bg: #fff5e5;
  --salyco-status-error: #a52a32;
  --salyco-status-error-bg: #fff0f1;
  /* Info is navy on a tint of it rather than a fifth hue: the notice bar is a
     quieter relative of the brand surface, not a separate semantic colour. */
  --salyco-status-info: #052e5f;
  --salyco-status-info-bg: #eef3f8;

  --salyco-font-persian: "Vazirmatn", sans-serif;
  --salyco-font-sans: "Inter", "Vazirmatn", sans-serif;
}

/* Space reserved by the chrome a page has to clear — Design.md §8.

   Pages offset their top padding by --navbar-height so content never sits behind
   the bar, and App.jsx pads the page bottom by --tabbar-height so the tab bar
   never covers the footer's last row. Each is zero wherever its bar is not
   rendered: below lg the desktop navbar is gone (the mobile top bar replaces
   it), and from lg up the two mobile bars are.

   These belong here rather than in src/index.css for the reason the @font-face
   blocks do. The Django-rendered article pages link this file and no Tailwind
   bundle, so while the values lived in the bundle those pages had no
   --navbar-height at all and hardcoded a header height instead — which is how
   they drifted from the site's. The pair travels together: they are one
   measurement of the chrome, taken at two breakpoints. */
:root {
  --navbar-height: calc(68px + env(safe-area-inset-top, 0px));
  --tabbar-height: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  :root {
    --navbar-height: calc(116px + env(safe-area-inset-top, 0px));
    --tabbar-height: 0px;
  }
}