/**
 * @file        webtools-theme.css
 * @description SYNTHETIXMIND theme for the hosted web tools (SynthCalc, SynthTime): overrides their colour tokens and adds the site bar
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         0b6924df-9a68-4df5-8644-1101c0aa92e5
 * @version     0.1.1.3
 * @created     2026-11-02
 * @updated     2026-11-02
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* WHY: the apps are copied unchanged from their Vite builds (scripts/sync-webtools.py) and
 *      only this file restyles them, so a rebuild in REATools never loses the theme.
 *      It loads after the app's own CSS; html[data-webtool] scopes each app.
 * Brand: navy #1C2C37, orange #FA5800, mahogany #6B2D19, soft white #F2F4F6, beige #EADDD3.
 * Contrast: #FA5800 on white is only 3.25:1, so text-level accents use #C24400 (5.1:1 on white)
 * in light mode and #FF7A2E (5.5:1 on navy) in dark mode. Pure #FA5800 is used for fills
 * with dark text (5.7:1) and decoration only. */

/* ---- Site bar (shared): link back to the Tools page and to custom-tool contact ---- */
.smnd-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: linear-gradient(120deg, #1C2C37 0%, #1C2C37 55%, #6B2D19 100%);
  color: #F2F4F6;
  font: 600 0.875rem/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.smnd-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #FA5800, #ff8a47 50%, #FA5800);
  background-size: 200% 100%;
  animation: smnd-flow 6s linear infinite;
}

@keyframes smnd-flow {
  from { background-position: 0 0; }
  to   { background-position: 200% 0; }
}

.smnd-bar a {
  color: #F2F4F6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.smnd-bar a:hover,
.smnd-bar a:focus-visible {
  color: #ffb38a;
}

.smnd-bar .smnd-word {
  letter-spacing: 0.08em;
}

.smnd-bar .smnd-cta {
  padding: 6px 14px;
  border-radius: 999px;
  background: #FA5800;
  color: #1a1206;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.smnd-bar .smnd-cta:hover,
.smnd-bar .smnd-cta:focus-visible {
  color: #1a1206;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgb(250 88 0 / 0.35);
}

/* ---- SynthCalc: light and dark tokens in brand colours ---- */
html[data-webtool="synthcalc"] {
  --bg: #F2F4F6;
  --surface: #ffffff;
  --surface-2: #F6F1EC;
  --border: #E2D6CC;
  --text: #1C2C37;
  --muted: #4a5864;
  --accent: #C24400;
  --accent-text: #ffffff;
  --accent-soft: #FDE6D8;
  --danger: #b42318;
}

@media (prefers-color-scheme: dark) {
  html[data-webtool="synthcalc"] {
    --bg: #121c24;
    --surface: #1C2C37;
    --surface-2: #243846;
    --border: #33495a;
    --text: #F2F4F6;
    --muted: #C9D2DA;
    --accent: #FF7A2E;
    --accent-text: #1C2C37;
    --accent-soft: #3d2a20;
    --danger: #ff8a80;
  }
}

html[data-webtool="synthcalc"] body {
  background:
    radial-gradient(1200px 400px at 100% 0%, rgb(250 88 0 / 0.07), transparent 70%),
    var(--bg);
}

html[data-webtool="synthcalc"] .name {
  color: var(--text);
  letter-spacing: -0.01em;
}

html[data-webtool="synthcalc"] .panel {
  border-top: 3px solid #FA5800;
  box-shadow: 0 12px 32px rgb(28 44 55 / 0.08);
}

/* ---- SynthTime: brand dusk (navy to mahogany); the light-window band colours stay as they are ---- */
html[data-webtool="synthtime"] {
  --sky-top: #1C2C37;
  --sky-bottom: #2b2f3a;
  --panel: rgb(22 34 43 / 0.86);
  --panel-border: rgb(250 88 0 / 0.22);
  --text: #F2F4F6;
  --muted: #C9D2DA;
}

html[data-webtool="synthtime"] body {
  background: linear-gradient(180deg, #1C2C37 0%, #2b2f3a 55%, #6B2D19 100%) fixed;
  background-color: #1C2C37;
}

/* :where() keeps this at element specificity so the site bar link colours still win. */
:where(html[data-webtool="synthtime"]) a {
  color: #FF8A47;
}

/* :where() keeps the specificity of the app's own .button rule, so .ghost and pressed states still win. */
:where(html[data-webtool="synthtime"]) .button {
  background: #FA5800;
  color: #1a1206;
}

html[data-webtool="synthtime"] input[type="range"] {
  accent-color: #FA5800;
}

html[data-webtool="synthtime"] .top h1 {
  color: #F2F4F6;
}