/* ==========================================================================
   TaazTV — לוח מידע
   Design tokens shared by the TV display and the admin panel.
   Palette and type are taken verbatim from the approved design.
   ========================================================================== */

:root {
  /* — brand palette — */
  --primary-blue: #2371B4;
  --dark-blue: #0A4A7A;
  --light-blue: #50B8EE;
  --background-light: #F5F5F5;
  --background-dark: #121212;

  /* — accent ramp (derived from the palette above) — */
  --color-accent-100: #E7F1F9;
  --color-accent-200: #C7E1F4;
  --color-accent-300: #9CCBEB;
  --color-accent-400: #50B8EE;
  --color-accent-500: #2371B4;
  --color-accent-600: #1F6199;
  --color-accent-700: #19527F;
  --color-accent-800: #0F4E7F;
  --color-accent-900: #0A4A7A;
  --color-accent: var(--color-accent-500);

  /* — surfaces and text — */
  --color-bg: var(--background-light);
  --color-text: var(--background-dark);
  --color-divider: rgba(18, 18, 18, .16);
  --color-neutral-100: #EFEFF0;
  --color-neutral-200: #E2E3E5;
  --color-neutral-400: #A9AEB4;
  --color-neutral-700: #5B6066;
  --color-neutral-900: #2A2D31;

  /* — status — */
  --color-ok: #1E8E5A;
  --color-ok-soft: #E4F4EC;
  --color-warn: #B4761F;
  --color-warn-soft: #FBF1E0;
  --color-danger: #C0392B;
  --color-danger-soft: #FBEAE8;

  /* — type — */
  /* headings: Assistant Bold (the demo ships only fonts whose licence allows it) */
  --font-heading: "Assistant", "Segoe UI", system-ui, sans-serif;
  --font-body: "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-heading-weight: 400;
}

/* ==========================================================================
   Blueprint frame — the wireframe object every panel, card and figure wears.
   Square corners, hairline border, "+" registration marks at each corner.
   ========================================================================== */
.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  pointer-events: none;
}
.blueprint > .corner::before,
.blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* Photographs washed into the accent, like a screen print. Opt-in. */
.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-accent);
  mix-blend-mode: color;
}

/* Small tinted label. */
.tag {
  display: inline-flex;
  align-items: center;
  border-radius: 0;
  letter-spacing: .02em;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
}