/* WEEKENDS Production OS — Design tokens */

:root {
  /* Color — monochrome plus three muted state accents */
  --ink: #111111;
  --paper: #FFFFFF;
  --paper-soft: #FAFAFA;
  --ink-2: #555555;
  --ink-3: #888888;
  --rule: #DDDDDD;
  --wash: #F4F4F4;

  --approved: #1F5E3A;
  --pending: #8C6D1F;
  --rejected: #7A2B2B;

  --approved-bg: rgba(31, 94, 58, 0.10);
  --pending-bg: rgba(140, 109, 31, 0.10);
  --rejected-bg: rgba(122, 43, 43, 0.10);
  --ink-bg-10: rgba(17, 17, 17, 0.06);

  /* Typography */
  --font-sans: "Inter", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Spacing — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;

  /* Density — multiplied by row heights */
  --row-h: 40px;
  --row-h-sm: 32px;
  --row-h-tight: 24px;

  /* Radius */
  --r: 4px;
  --r-pill: 12px;

  /* Borders */
  --border: 1px solid var(--rule);
  --border-strong: 1px solid var(--ink);
  --border-emph: 1px solid var(--ink);

  /* Shadow — used ONCE per screen, on dropdowns & modals only */
  --shadow-pop: 0 8px 24px rgba(17, 17, 17, 0.08);
  --shadow-drag: 0 4px 12px rgba(17, 17, 17, 0.12);

  /* Motion */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-modal: 300ms ease;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --content-max: 1440px;
}

/* Compact density */
.density-compact {
  --row-h: 32px;
  --row-h-sm: 28px;
  --row-h-tight: 20px;
  --s-6: 16px;
  --s-8: 24px;
  --s-12: 32px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Type scale ===== */
.t-display { font-size: 48px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; }
.t-h1 { font-size: 32px; line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; }
.t-h2 { font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; }
.t-h3 { font-size: 17px; line-height: 1.25; font-weight: 500; letter-spacing: -0.005em; }
.t-body { font-size: 14px; line-height: 1.5; }
.t-body-sm { font-size: 13px; line-height: 1.4; }
.t-label {
  font-size: 11px; line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.t-mono { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; }

.it { font-style: italic; }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }

/* ===== Reset for buttons ===== */
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* ===== Layout helpers ===== */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.gap-8 { gap: var(--s-8); }
.gap-12 { gap: var(--s-12); }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--rule); }

/* ===== Italic emphasis toggle ===== */
.no-italic em, .no-italic .it { font-style: normal; }

/* ===== Color budget overlay ===== */
body.color-budget-on .cb-color {
  outline: 1px dashed var(--rejected);
  outline-offset: 1px;
}
body.color-budget-on::before {
  content: "Color budget overlay — pills, status accents only";
  position: fixed;
  top: 8px; right: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 9999;
  border-radius: var(--r);
}

/* ===== Skeleton ===== */
.skel {
  background: var(--wash);
  border-radius: 2px;
  display: inline-block;
}
.skel-line { height: 12px; width: 100%; }
.skel-block { height: 100%; width: 100%; }

/* ===== Scrollbars (subtle) ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ===== Page transitions ===== */
.page-fade-in { animation: fade-in 200ms ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-pop-in { animation: modal-pop 300ms ease; }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Asset hover zoom ===== */
.asset-img-wrap { overflow: hidden; }
.asset-img-wrap img { transition: transform 400ms ease; display: block; }
.asset-img-wrap:hover img { transform: scale(1.02); }

/* ===== Drag shake ===== */
.shake { animation: shake 200ms ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}