/* Shared presentation tokens copied from the published YahaLinks homepage.
   Keep this file identical in Info Monitor, Downloads and YahaRadar.
   Measurement palettes and map layers deliberately retain their own colours. */
:root {
  --yl-bg: #f4effe;
  --yl-surface: #fff;
  --yl-surface-alt: #f3ecff;
  --yl-ink: #2b145a;
  --yl-ink-muted: #533e85;
  --yl-border: #dfd3ff;
  --yl-control-border: #8269b8;
  --yl-primary: #6d28d9;
  --yl-primary-hover: #5b21b6;
  --yl-primary-soft: #ede9fe;
  --yl-focus: #6d28d9;
  --yl-shadow-card: 0 18px 42px -18px rgb(109 40 217 / 13%);
  --yl-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' fill='none'%3E%3Cg stroke='%236d28d9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg opacity='0.16' transform='translate(-36 44) scale(22)'%3E%3Cpath d='M10 10l8 8 8-8M18 18v10' stroke-width='1.25'/%3E%3Ccircle cx='10' cy='10' r='3' stroke-width='0.8'/%3E%3Ccircle cx='26' cy='10' r='3' stroke-width='0.8'/%3E%3Ccircle cx='18' cy='28' r='3' stroke-width='0.8'/%3E%3Ccircle cx='18' cy='18' r='3.4' stroke-width='0.8'/%3E%3C/g%3E%3Cg opacity='0.15' transform='translate(960 -110) scale(20)'%3E%3Cpath d='M10 10l8 8 8-8M18 18v10' stroke-width='1.25'/%3E%3Ccircle cx='10' cy='10' r='3' stroke-width='0.8'/%3E%3Ccircle cx='26' cy='10' r='3' stroke-width='0.8'/%3E%3Ccircle cx='18' cy='28' r='3' stroke-width='0.8'/%3E%3Ccircle cx='18' cy='18' r='3.4' stroke-width='0.8'/%3E%3C/g%3E%3Cg opacity='0.13' transform='translate(1030 430) scale(16)'%3E%3Cpath d='M10 10l8 8 8-8M18 18v10' stroke-width='1.2'/%3E%3Ccircle cx='10' cy='10' r='3' stroke-width='0.75'/%3E%3Ccircle cx='26' cy='10' r='3' stroke-width='0.75'/%3E%3Ccircle cx='18' cy='28' r='3' stroke-width='0.75'/%3E%3Ccircle cx='18' cy='18' r='3.4' stroke-width='0.75'/%3E%3C/g%3E%3Cpath d='M70 110h240l96 96h340M880 760h250l88-88h180M40 770h210l84-84h260' stroke-width='1.6' opacity='0.16'/%3E%3Cg fill='%236d28d9' fill-opacity='0.22' stroke='none'%3E%3Ccircle cx='310' cy='110' r='5.5'/%3E%3Ccircle cx='406' cy='206' r='5.5'/%3E%3Ccircle cx='746' cy='206' r='5.5'/%3E%3Ccircle cx='1130' cy='760' r='5.5'/%3E%3Ccircle cx='1218' cy='672' r='5.5'/%3E%3Ccircle cx='250' cy='770' r='5.5'/%3E%3Ccircle cx='334' cy='686' r='5.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --yl-background: var(--yl-watermark),
    radial-gradient(circle at 14% 18%, rgb(196 181 253 / 58%) 0%, transparent 45%),
    radial-gradient(circle at 86% 22%, rgb(245 208 254 / 52%) 0%, transparent 46%),
    radial-gradient(circle at 76% 84%, rgb(199 210 254 / 55%) 0%, transparent 48%),
    linear-gradient(145deg, #f6f1ff 0%, #ebe1ff 50%, #f7f0ff 100%);
  --yl-card-background: radial-gradient(circle at 92% 8%, rgb(233 213 255 / 55%) 0%, transparent 48%),
    linear-gradient(165deg, #fff 0%, #fcfaff 60%, #f5eeff 100%);
  --yl-button-background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 52%, #5b21b6 100%);
}
body {
  color: var(--yl-ink);
  background-color: var(--yl-bg);
  background-image: var(--yl-background);
  background-size: 1440px auto, auto, auto, auto, auto;
  background-position: center top, center, center, center, center;
  background-repeat: no-repeat;
}
.portal-header {
  background-color: #faf6ff;
  background-image: linear-gradient(90deg, #fbf8ff 0%, #f3ecff 50%, #faf5ff 100%);
  color: var(--yl-ink);
  border-bottom-color: var(--yl-border);
  box-shadow: 0 4px 20px -12px rgb(109 40 217 / 12%);
}
.portal-header .portal-brand { color: var(--yl-ink); }
.portal-header .portal-brand-mark,
.portal-header .portal-brand-word > span { color: var(--yl-primary); }
.portal-header .portal-navigation a { color: #4c3779; font-weight: 600; }
.portal-header .portal-navigation a[aria-current="page"] {
  color: var(--yl-primary-hover);
  border-bottom-color: var(--yl-primary);
  font-weight: 700;
}
.portal-header .portal-navigation a:hover { color: var(--yl-primary-hover); }
:where(a, button, input, select, summary):focus-visible { outline-color: var(--yl-focus); }
.portal-header a:focus-visible { outline-color: var(--yl-focus); }
@media (forced-colors: active) {
  body { background-image: none; }
  .portal-header { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .portal-header .portal-brand { color: LinkText; }
  .portal-header .portal-brand-mark, .portal-header .portal-brand-word > span,
  .portal-header .portal-navigation a { color: LinkText; }
  .portal-header .portal-navigation a[aria-current="page"] { color: LinkText; border-color: LinkText; }
  :where(a, button, input, select, summary):focus-visible,
  .portal-header a:focus-visible { outline-color: Highlight; }
}