/* Gold UI: design tokens.
 *
 * NOTE: this is a copy, kept so the site is one self-contained folder. The
 * source of truth is brand/gold-ui/tokens.css; edit that and re-copy if the
 * tokens change, so the website keeps matching the browser it describes.
 *
 * The single source of truth for colour, spacing, type, shape and motion.
 * The reasoning behind them is in docs/DESIGN.md.
 *
 * Rule of thumb: black surface, gold accent, used sparingly. If everything
 * glows, nothing communicates.
 *
 * These values are the *defaults*. The theme engine (ui/chrome/theme.js) can
 * override any of them at runtime by setting the same custom properties on
 * :root: presets, a custom accent, density, radius and so on all resolve to
 * the variables below, so every surface follows along for free.
 */

:root {
  color-scheme: dark;

  /* Surfaces ------------------------------------------------------------- */
  --bg-void: #000000;      /* the window itself */
  --bg-content: #030303;   /* the area pages sit in */
  --bg-surface: #0a0a0a;   /* bars, fields, cards */
  --bg-raised: #141414;    /* hover */
  --bg-active: #202020;    /* pressed, selected */
  --bg-glass: rgba(12, 12, 12, 0.72);

  /* Lines ---------------------------------------------------------------- */
  --border-subtle: #1f1f1f;
  --border-strong: #2b2b2b;
  --hairline: rgba(255, 255, 255, 0.06);

  /* Text ----------------------------------------------------------------- */
  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-disabled: #5c5c5c;
  --text-inverse: #14100a;

  /* Accent and status ---------------------------------------------------- */
  --accent: #e0b84c;
  --accent-rgb: 224, 184, 76;
  --accent-hover: #eec65f;
  --accent-soft: #f3d98a;
  --accent-dim: rgba(224, 184, 76, 0.14);
  --accent-glow: rgba(224, 184, 76, 0.35);
  --accent-ink: #14100a;   /* text on a filled accent */
  --danger: #ff5c5c;
  --warning: #f5b942;
  --ok: #5bd18b;

  /* Gradients and depth -------------------------------------------------- */
  --accent-grad: linear-gradient(135deg, var(--accent-soft), var(--accent));
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 62%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 20px 55px rgba(0, 0, 0, 0.68);
  --glass-blur: 18px;
  --scroll-thumb: rgba(255, 255, 255, 0.11);
  --scroll-thumb-hover: rgba(255, 255, 255, 0.2);

  /* Background decoration (driven by the theme engine) ------------------ */
  --bg-alpha: 0.55;        /* how strong the aura/mesh reads */
  --bg-image: none;        /* set to url(...) for image backgrounds */

  /* Type ----------------------------------------------------------------- */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-scale: 1;
  --text-body: 14px;
  --text-chrome: 13px;
  --text-sm: 12px;
  --text-xs: 11px;

  /* Space ---------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Radius --------------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* Motion --------------------------------------------------------------- */
  --t-fast: 120ms;
  --t-panel: 200ms;
  --t-slow: 380ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout --------------------------------------------------------------- */
  --titlebar-h: 40px;
  --toolbar-h: 48px;
  --tab-h: 30px;
  --settings-nav-w: 208px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

/* Motion off: either from settings or the OS preference. */
html[data-motion="off"],
html[data-motion="off"] * {
  --t-fast: 0ms !important;
  --t-panel: 0ms !important;
  --t-slow: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-panel: 0ms;
    --t-slow: 0ms;
  }
}