/* Shared brand variables — the single source of truth for colors,
 * typography, and common patterns across all Drift sites.
 *
 * See brand/BRAND.md for the full specification.
 */

:root {
  /* Colors */
  --brand-1: #f1a006;  /* orange — Atomic, primary CTA */
  --brand-2: #8269eb;  /* purple — Backbone, secondary */
  --brand-3: #10b981;  /* green  — Canvas, success, totals */
  --ink: #1b2844;      /* all text, all borders */
  --bg: #e2e2e2;       /* page background — the "desk" */
  --panel: #ffffff;    /* card/panel fill */
  --muted: #5f6b85;   /* secondary text, hints */
  --error: #d23838;   /* error states only */

  /* Layout — used by the navbar, docs, portal, and every page layout.
   * All content containers should use these so edges align. */
  --max-width: 1500px;
  --padding: clamp(24px, 6vw, 150px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  font-weight: 300;
}

/* Tinos for the logo — the only serif on the platform */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@1,700&display=swap');

/* Logo snippet — reusable across all sites */
.drift-logo {
  font-family: 'Tinos', serif;
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

/* Toy affordance — the signature interaction pattern */
.toy-raise {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.toy-raise:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 0 var(--ink);
}
.toy-raise:active {
  transform: translateY(0);
  box-shadow: 0 0 0 var(--ink);
}

/* Brand spinner — static square, edges light up in brand colors */
.drift-spinner {
  display: inline-block;
  border: 3px solid rgba(27, 40, 68, 0.15);
  animation: drift-edge-fill 2.4s linear infinite;
}

@keyframes drift-edge-fill {
  0%, 19%   { border-top-color: var(--brand-1); border-right-color: rgba(27,40,68,0.15); border-bottom-color: rgba(27,40,68,0.15); border-left-color: rgba(27,40,68,0.15); }
  25%, 44%  { border-top-color: rgba(27,40,68,0.15); border-right-color: var(--brand-2); border-bottom-color: rgba(27,40,68,0.15); border-left-color: rgba(27,40,68,0.15); }
  50%, 69%  { border-top-color: rgba(27,40,68,0.15); border-right-color: rgba(27,40,68,0.15); border-bottom-color: var(--brand-3); border-left-color: rgba(27,40,68,0.15); }
  75%, 94%  { border-top-color: rgba(27,40,68,0.15); border-right-color: rgba(27,40,68,0.15); border-bottom-color: rgba(27,40,68,0.15); border-left-color: var(--ink); }
  100%      { border-top-color: var(--brand-1); border-right-color: rgba(27,40,68,0.15); border-bottom-color: rgba(27,40,68,0.15); border-left-color: rgba(27,40,68,0.15); }
}

.drift-spinner-success { animation: none; border-color: var(--brand-3); }
.drift-spinner-error { animation: none; border-color: var(--error); }