/* ════════════════════════════════════════════
   ColorsForge — core.css
   Variables, reset, typography, fonts.
   Loaded on every page.
   ════════════════════════════════════════════ */

/* ── Self-hosted fonts ── */
@font-face {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/tabler-icons.woff2") format("woff2");
}

.ti {
  font-family: "tabler-icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon codes used across the app */
.ti-photo-up::before    { content: "\f38b" }
.ti-heart::before       { content: "\eabe" }
.ti-bookmark::before    { content: "\ea3a" }
.ti-bookmark-filled::before { content: "\fa88" }
.ti-download::before    { content: "\ea96" }
.ti-share-3::before     { content: "\f7bd" }
.ti-color-swatch::before { content: "\eb61" }
.ti-dice-5::before      { content: "\f08f" }
.ti-pencil::before      { content: "\eb04" }
.ti-trash::before       { content: "\eb41" }
.ti-grip-vertical::before { content: "\ec01" }
.ti-copy::before        { content: "\ea7a" }
.ti-brand-x::before     { content: "\fc0f" }
.ti-loader::before      { content: "\eca3" }
.ti-x::before           { content: "\eb55" }
.ti-alert-circle::before { content: "\ea05" }
.ti-database-plus::before { content: "\fa17" }
.ti-refresh::before     { content: "\eb13" }
.ti-check::before       { content: "\ea5e" }
.ti-loader-2::before    { content: "\f226" }
.ti-shape::before       { content: "\eb4d" }
.ti-leaf::before        { content: "\f00a" }

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/SpaceMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/SpaceMono-Bold.woff2') format('woff2');
}

/* ── Design tokens ── */
:root {
  --ff:  'Space Grotesk', system-ui, sans-serif;
  --fm:  'Space Mono', 'Courier New', monospace;
  --bg:  #fff;
  --bg2: #F6F5EF;
  --bd:  #111;
  --bd-lt: #CCC;
  --bd-a: #AABF00;
  --text:  #111;
  --text2: #555;
  --text3: #999;
  --acc:   #CBFF00;
  --danger: #FF3B00;
  --r: 0px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ff);
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font-family: var(--ff); cursor: pointer; }
input  { font-family: var(--ff); }
select { font-family: var(--ff); }
a      { color: inherit; text-decoration: none; }

/* ── Utility ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Toast (global, used on all pages) ── */
.toast {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  padding: 10px 16px;
  border: 1.5px solid #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: all .18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok  { background: var(--bd); }
.toast.err { background: var(--danger); }