/* SaferHub look: the shared theme every app wears (served at saferword.com/look.css).
   /look.js sets on <html>: data-sh-theme (aur | aurora | ametist | jar | safir), data-sh-mode (noapte | zi),
   data-sh-glow (discret | vie | neon) and data-sh-shape (rot | cerc | patrat). Apps read only the --sh-* tokens below. */

/* ---------- themes: accent pair + the sky for night and for day ---------- */
:root, html[data-sh-theme="aur"] {
  --sh-acc: #f2c45a; --sh-acc2: #ff9d5c; --sh-deep: #b8862c; --sh-text-day: #8a5f12;
  --sh-n1: #060818; --sh-n2: #141038; --sh-na: #3a2b8f; --sh-nb: #123a7a; --sh-nc: #6b2a6f;
  --sh-d1: #f6f3ec; --sh-d2: #ece5d8; --sh-da: #f3d49a; --sh-db: #bcd6f5; --sh-dc: #ecc6e6;
}
html[data-sh-theme="aurora"] {
  --sh-acc: #2ee6c9; --sh-acc2: #7c8cff; --sh-deep: #149e8c; --sh-text-day: #0a6e64;
  --sh-n1: #03141a; --sh-n2: #0a2233; --sh-na: #0f6b6b; --sh-nb: #2a3a9a; --sh-nc: #1a7a5c;
  --sh-d1: #eef6f4; --sh-d2: #dcece8; --sh-da: #a8eedf; --sh-db: #c3cbff; --sh-dc: #bfe9f2;
}
html[data-sh-theme="ametist"] {
  --sh-acc: #c08bff; --sh-acc2: #ff7ac3; --sh-deep: #8a52d6; --sh-text-day: #6b34b3;
  --sh-n1: #110922; --sh-n2: #28123f; --sh-na: #6a2fa8; --sh-nb: #a8466b; --sh-nc: #3a2b8f;
  --sh-d1: #f6f1fb; --sh-d2: #e9def5; --sh-da: #e3c9ff; --sh-db: #ffc6e3; --sh-dc: #d4d0ff;
}
html[data-sh-theme="jar"] {
  --sh-acc: #ff8a4c; --sh-acc2: #ffcc66; --sh-deep: #c2541f; --sh-text-day: #a33e14;
  --sh-n1: #160906; --sh-n2: #2b130b; --sh-na: #a8461f; --sh-nb: #b9733a; --sh-nc: #6b2a3f;
  --sh-d1: #fbf3ec; --sh-d2: #f0e1d3; --sh-da: #ffd2b0; --sh-db: #ffe6a8; --sh-dc: #f6c8c0;
}
html[data-sh-theme="safir"] {
  --sh-acc: #5cb6ff; --sh-acc2: #8f7bff; --sh-deep: #2f7fd0; --sh-text-day: #1b5aad;
  --sh-n1: #050b1c; --sh-n2: #0a1e40; --sh-na: #1d4fa8; --sh-nb: #3a2b8f; --sh-nc: #0f6b8a;
  --sh-d1: #eef3fb; --sh-d2: #dbe6f6; --sh-da: #bcd6f5; --sh-db: #d4ccff; --sh-dc: #bfe9f2;
}

/* ---------- mode: the tokens apps use ---------- */
:root {
  --sh-bg: var(--sh-n1); --sh-bg2: var(--sh-n2); --sh-au-a: var(--sh-na); --sh-au-b: var(--sh-nb); --sh-au-c: var(--sh-nc);
  --sh-ink: #f6f3fb; --sh-soft: rgba(236, 233, 255, .68); --sh-faint: rgba(236, 233, 255, .42);
  --sh-link: var(--sh-acc); --sh-on-acc: #140d03;
  --sh-glass: rgba(255, 255, 255, .06); --sh-field: rgba(6, 6, 14, .72); --sh-bar: rgba(14, 14, 26, .62);
  --sh-line: rgba(255, 255, 255, .13); --sh-hi: rgba(255, 255, 255, .1);
  --sh-btn: linear-gradient(180deg, var(--sh-acc2) -40%, var(--sh-acc) 60%);
  --sh-g: 1; --sh-spd: 4.5s; --sh-ico-r: 22.5%;
  color-scheme: dark;
}
html[data-sh-mode="zi"] {
  --sh-bg: var(--sh-d1); --sh-bg2: var(--sh-d2); --sh-au-a: var(--sh-da); --sh-au-b: var(--sh-db); --sh-au-c: var(--sh-dc);
  --sh-ink: #1b1726; --sh-soft: rgba(27, 23, 38, .68); --sh-faint: rgba(27, 23, 38, .48);
  --sh-link: var(--sh-text-day);
  --sh-glass: rgba(255, 255, 255, .62); --sh-field: rgba(255, 255, 255, .92); --sh-bar: rgba(255, 255, 255, .72);
  --sh-line: rgba(40, 30, 60, .13); --sh-hi: rgba(255, 255, 255, .9);
  color-scheme: light;
}

/* ---------- glow strength and icon shape ---------- */
html[data-sh-glow="discret"] { --sh-g: .45; --sh-spd: 7s; }
html[data-sh-glow="neon"] { --sh-g: 1.7; --sh-spd: 3s; }
html[data-sh-shape="cerc"] { --sh-ico-r: 50%; }
html[data-sh-shape="patrat"] { --sh-ico-r: 12%; }
/* glow colours, already scaled by the strength the person picked */
:root {
  --sh-glow-soft: color-mix(in srgb, var(--sh-acc) min(100%, 22% * var(--sh-g)), transparent);
  --sh-glow: color-mix(in srgb, var(--sh-acc) min(100%, 40% * var(--sh-g)), transparent);
  --sh-glow-hi: color-mix(in srgb, var(--sh-acc) min(100%, 60% * var(--sh-g)), transparent);
}

/* ---------- the circling light: wrap a search field (or any pill) in .sh-glow ---------- */
@property --sh-ang { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes sh-spin { to { --sh-ang: 360deg; } }
.sh-glow {
  --sh-arc: conic-gradient(from var(--sh-ang), transparent 0deg, var(--sh-acc) 70deg, var(--sh-acc2) 120deg, transparent 190deg, transparent 360deg);
  position: relative; isolation: isolate; display: block; border-radius: 999px; padding: 1.5px;
  background: var(--sh-arc), linear-gradient(var(--sh-line), var(--sh-line));
  animation: sh-spin var(--sh-spd) linear infinite;
}
.sh-glow::before {
  content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--sh-arc); filter: blur(12px); opacity: calc(.55 * var(--sh-g)); transition: opacity .3s;
}
.sh-glow:focus-within::before { opacity: calc(.9 * var(--sh-g)); }
.sh-glow > * { border-radius: inherit; }
@media (prefers-reduced-motion: reduce) { .sh-glow { animation: none; --sh-ang: 200deg; } }