/*
 * Tiny Imps design: colours, type and the few shared pieces (buttons, cards, pills, switches).
 * One file for everything that should look like tinyimps.com: the Tiny Imps app window uses it today;
 * the site (site/public/styles.css, same values) and the Premiere panels can switch to it.
 *
 * Fonts: Bowlby One for headings, Geist for text, both under the SIL Open Font License (texts in
 * ./fonts), from Google Fonts. They are served from ./fonts so the app looks right offline. Geist comes
 * in two parts: latin and latin-ext (Turkish letters such as ş, ğ, ı are in latin-ext).
 */

@font-face {
  font-family: "Bowlby One";
  src: url("fonts/BowlbyOne-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --page: #f8f5f1;
  --card: #ffffff;
  --ink: #26201e;
  --muted: #6a605b;
  --line: #ddd4ca;
  --edge-plain: #b9ada2;
  --dark: #27221f;
  --imp: #ff6b5e;
  --imp-deep: #e5503f;
  --display: "Bowlby One", "Arial Black", system-ui, sans-serif;
  --text: Geist, system-ui, "Segoe UI", sans-serif;
}

/* Colour tones: a fill, a darker edge of the same hue, a deeper fill for artwork, a soft tint */

.tone-butter { --tone: #ffdf85; --edge: #cfa033; --deep: #f6cc5c; --soft: #fff3cf; }
.tone-peach { --tone: #ffc4b0; --edge: #d97f64; --deep: #f8ac93; --soft: #ffe7de; }
.tone-sky { --tone: #b9d8ff; --edge: #6b9bd9; --deep: #9dc6fa; --soft: #e2efff; }
.tone-mint { --tone: #aee3b4; --edge: #5aaa67; --deep: #92d49a; --soft: #dcf3df; }
.tone-lilac { --tone: #d5caff; --edge: #9280da; --deep: #c1b3fa; --soft: #ece7ff; }

/* Buttons: hard-edged, a 2px ledge underneath that the button sinks into when pressed */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #d97f64;
  border-radius: 12px;
  background: #ffc4b0;
  box-shadow: 0 2px 0 #d97f64;
  color: var(--ink);
  font: 600 15px/1 var(--text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn.plain {
  border-color: var(--edge, var(--edge-plain));
  background: var(--card);
  box-shadow: 0 2px 0 var(--edge, var(--edge-plain));
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--edge, #d97f64);
}

.btn:focus-visible,
.switch input:focus-visible + .track {
  outline: 2px solid var(--imp-deep);
  outline-offset: 2px;
}

.btn[aria-disabled="true"],
.btn:disabled {
  border-color: var(--line);
  background: var(--page);
  box-shadow: 0 2px 0 var(--line);
  color: var(--muted);
  cursor: default;
}

/* Cards: a tone fill with its own darker edge */

.card {
  padding: 20px;
  border: 1px solid var(--edge, var(--line));
  border-radius: 16px;
  background: var(--tone, var(--card));
  box-shadow: 0 2px 0 var(--edge, var(--line));
}

/* Pills: small uppercase labels such as "Soon" */

.soon {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--edge, var(--edge-plain));
  border-radius: 999px;
  background: var(--card);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Switches: a checkbox drawn as an on/off slider; the label text sits next to it */

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch .track {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border: 1px solid var(--edge, var(--edge-plain));
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 2px 0 var(--edge, var(--edge-plain));
  transition: background 0.15s;
}

.switch .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--edge, var(--edge-plain));
  transition: transform 0.15s;
}

.switch input:checked + .track {
  background: var(--imp);
  border-color: var(--imp-deep);
  box-shadow: 0 2px 0 var(--imp-deep);
}

.switch input:checked + .track::after {
  background: #fff;
  transform: translateX(18px);
}