/*
 * GriffNode design tokens: the ONE source of color, type, radius and motion for every
 * merchant-facing page (landing, dashboard, checkout/payment, auth, info/docs/money, errors).
 * The admin panel deliberately does not load this file.
 *
 * Reference implementation: the 2026-10 landing prototype. Rules of use:
 *   - Neutrals carry ~90% of every screen. The brand gradient is punctuation: the primary
 *     button, the logo mark, one accent word or key number per screen, progress fills.
 *   - Status colors mean one thing each: ok = money arrived/settled, warn = pending (never a
 *     final state), bad = a fee, a block, a failure. Never decorative.
 *   - Amounts, addresses, hashes, keys and code use --gn-mono with tabular figures.
 *
 * Dark mode follows the existing theme switch (cg-theme cookie), which sets BOTH
 * html.dark-mode and [data-theme="dark"] depending on the page, so both hooks are covered.
 *
 * Served as /css/shared/tokens.css; fonts as /fonts/<file> (CORS + immutable cache in routes.go).
 */

@font-face {
  font-family: "Geist";
  src: url("https://static.griffnode.com/fonts/Geist-Variable-1.7.2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("https://static.griffnode.com/fonts/GeistMono-Variable-1.7.2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutrals */
  --gn-page: #f6f7fb;
  --gn-surface: #ffffff;
  --gn-surface-2: #eef0f6;
  --gn-ink: #0b0d14;
  --gn-ink-2: #2b3142;           /* body copy when pure ink is too heavy */
  --gn-muted: #5b6275;           /* 5.7:1 on --gn-page */
  --gn-hairline: rgba(11, 13, 20, .09);
  --gn-hairline-strong: rgba(11, 13, 20, .16);

  /* "Stage" panels (landing hero, closing CTA, auth side panel, page heroes). They follow
     the theme: a white card on the light page, the deep panel in dark mode. Anything drawn
     ON a stage uses the --gn-stage-* tokens, never a hard-coded white. */
  --gn-stage: #ffffff;
  --gn-stage-ink: #0b0d14;
  --gn-stage-muted: #5b6275;
  --gn-stage-line: rgba(11, 13, 20, .09);
  --gn-stage-glass: rgba(11, 13, 20, .035);
  --gn-stage-glass-2: rgba(11, 13, 20, .06);
  --gn-stage-dot: 11, 13, 20;          /* rgb triplet for the canvas dot field */
  --gn-stage-glow: rgba(99, 102, 241, .16);

  /* Brand */
  --gn-blue: #3b82f6;
  --gn-violet: #8b5cf6;
  --gn-grad: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --gn-grad-hover: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --gn-grad-tint: linear-gradient(135deg, rgba(59, 130, 246, .10), rgba(139, 92, 246, .10));
  --gn-brand-glow: 0 10px 30px -10px rgba(124, 58, 237, .55);
  --gn-brand-glow-hover: 0 16px 40px -10px rgba(124, 58, 237, .7);
  --gn-link: #2563eb;            /* solid brand for text links and focus, 5.2:1 on white */
  --gn-link-hover: #1d4ed8;
  --gn-focus: #3b82f6;
  --gn-selected: rgba(59, 130, 246, .10);

  /* Status (reserved meanings, see header) */
  --gn-ok: #16a34a;
  --gn-ok-bg: #dcfce7;
  --gn-ok-ink: #14532d;
  --gn-warn: #d97706;
  --gn-warn-bg: #fef3c7;
  --gn-warn-ink: #78350f;
  --gn-bad: #dc2626;
  --gn-bad-bg: #fee2e2;
  --gn-bad-ink: #7f1d1d;

  /* Type */
  --gn-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gn-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape: pills for actions, 12px for controls, 20px for cards, big for stages */
  --gn-r-ctl: 12px;
  --gn-r-card: 20px;
  --gn-r-pill: 999px;
  --gn-r-stage: clamp(20px, 3vw, 36px);

  /* Elevation: hairlines first, shadow only for things that float (menus, modals, toasts) */
  --gn-shadow-float: 0 24px 60px -24px rgba(11, 13, 20, .28), 0 2px 8px -2px rgba(11, 13, 20, .08);

  /* Motion */
  --gn-ease: cubic-bezier(.2, .8, .2, 1);
  --gn-fast: .15s;
  --gn-med: .3s;
}

html.dark-mode,
[data-theme="dark"] {
  --gn-page: #05060a;
  --gn-surface: #0e1018;
  --gn-surface-2: #151824;
  --gn-ink: #eef0f6;
  --gn-ink-2: #c9cdd9;
  --gn-muted: #9097ab;           /* 6.6:1 on --gn-page */
  --gn-hairline: rgba(255, 255, 255, .08);
  --gn-hairline-strong: rgba(255, 255, 255, .16);
  --gn-stage: #0b0d14;
  --gn-stage-ink: #f3f4f8;
  --gn-stage-muted: #8e94a8;
  --gn-stage-line: rgba(255, 255, 255, .1);
  --gn-stage-glass: rgba(255, 255, 255, .06);
  --gn-stage-glass-2: rgba(255, 255, 255, .12);
  --gn-stage-dot: 200, 205, 230;
  --gn-stage-glow: rgba(99, 102, 241, .42);
  --gn-link: #7aa7ff;
  --gn-link-hover: #a5c3ff;
  --gn-selected: rgba(59, 130, 246, .16);
  --gn-ok: #22c55e;
  --gn-ok-bg: rgba(34, 197, 94, .14);
  --gn-ok-ink: #86efac;
  --gn-warn: #f59e0b;
  --gn-warn-bg: rgba(245, 158, 11, .14);
  --gn-warn-ink: #fcd34d;
  --gn-bad: #ef4444;
  --gn-bad-bg: rgba(239, 68, 68, .14);
  --gn-bad-ink: #fca5a5;
  --gn-shadow-float: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  color-scheme: dark;
}

/* Brand-gradient text: one accent word or key number per screen, never body copy. */
.gn-grad-text {
  background: var(--gn-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}