/**
 * Gamble CRM — CSS Design Tokens
 * Mirror of @gamble/design-tokens. Kept in sync with apps/web/src/styles/tokens.css.
 */

:root {
  /* ===== Neutrals: blacks ===== */
  --gamble-black-950: #000000;
  --gamble-black-900: #0a0a0a;
  --gamble-black-800: #141414;
  --gamble-black-700: #1c1c1c;
  --gamble-black-600: #242424;
  --gamble-black-500: #2e2e2e;

  /* ===== Neutrals: grays ===== */
  --gamble-gray-500: #525252;
  --gamble-gray-400: #737373;
  --gamble-gray-300: #a3a3a3;
  --gamble-gray-200: #d4d4d4;
  --gamble-gray-100: #e5e5e5;
  --gamble-gray-50: #fafafa;

  /* ===== Brand orange (logo) ===== */
  --gamble-orange-950: #2e1800;
  --gamble-orange-900: #522900;
  --gamble-orange-800: #803f00;
  --gamble-orange-700: #a35600;
  --gamble-orange-600: #c96a00;
  --gamble-orange-500: #ef7e00;
  --gamble-orange-400: #ff9d2e;
  --gamble-orange-300: #ffc166;
  --gamble-orange-200: #ffd699;
  --gamble-orange-100: #ffe6bf;
  --gamble-orange-50: #fff6e5;

  /* ===== Semantic ===== */
  --gamble-success: #00c896;
  --gamble-warning: #ffb020;
  --gamble-error: #ff3b3b;
  --gamble-info: #2e90fa;

  /* ===== Shadows ===== */
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.7), 0 4px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.8);

  /* ===== Glows (used only on /login and splash) ===== */
  --glow-orange-sm: 0 0 12px rgba(239, 126, 0, 0.3);
  --glow-orange-md: 0 0 24px rgba(239, 126, 0, 0.4), 0 0 48px rgba(239, 126, 0, 0.2);
  --glow-orange-lg:
    0 0 32px rgba(239, 126, 0, 0.5), 0 0 64px rgba(239, 126, 0, 0.3),
    0 0 96px rgba(239, 126, 0, 0.15);

  /* ===== Fonts ===== */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ===== ShellDock geometry — single source for every bottom offset =====
   * Was a россыпь of 5 hardcoded magic numbers (6.5rem/5.5rem/11.5rem/3.5rem/
   * 0.75rem) drifting against the real dock height. `--dock-reserve` is the
   * full space the mobile dock occupies from the screen bottom (incl. the iOS
   * home-indicator inset): use it as `bottom` for sticky footers (they sit
   * just above the dock) and as the base for page bottom-padding. */
  --dock-gap: 0.75rem; /* dock distance from screen bottom (ShellDock `bottom`) */
  --dock-h: 70px; /* mobile dock bar height (see shell-dock height contract) */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--host-safe-top, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--host-safe-right, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--host-safe-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--host-safe-left, 0px));
  --app-height: 100dvh;
  --app-visible-height: var(--app-height);
  --app-visible-top: 0px;

  /* GambleOS Classic ergonomics + restored brand gradients (2026-09-07).
   * New screens use semantic aliases, never add an ad-hoc palette. */
  --ui-bg: var(--gamble-black-900);
  --ui-surface: var(--gamble-black-800);
  --ui-control: var(--gamble-black-700);
  --ui-hover: var(--gamble-black-600);
  --ui-border: var(--gamble-gray-500);
  --ui-border-hover: var(--gamble-gray-300);
  --ui-text: var(--gamble-gray-100);
  --ui-muted: var(--gamble-gray-300);
  --ui-action: var(--gamble-orange-500);
  --ui-action-hover: var(--gamble-orange-400);
  --ui-focus: var(--gamble-orange-300);
  --ui-accent-surface: var(--gamble-orange-950);
  --ui-accent-border: var(--gamble-orange-700);
  --ui-surface-gradient: linear-gradient(
    135deg,
    var(--gamble-black-600),
    var(--gamble-black-700) 48%,
    var(--gamble-black-800)
  );
  --ui-control-gradient: linear-gradient(135deg, var(--gamble-black-500), var(--gamble-black-700));
  --ui-hover-gradient: linear-gradient(135deg, var(--gamble-black-500), var(--gamble-black-600));
  --ui-action-gradient: linear-gradient(
    135deg,
    var(--gamble-orange-400),
    var(--gamble-orange-500) 55%,
    var(--gamble-orange-600)
  );
  --ui-action-hover-gradient: linear-gradient(
    135deg,
    var(--gamble-orange-300),
    var(--gamble-orange-400) 55%,
    var(--gamble-orange-500)
  );
  --ui-accent-gradient: linear-gradient(
    135deg,
    var(--gamble-orange-900),
    var(--gamble-orange-950) 60%,
    var(--gamble-black-800)
  );
  --ui-header-gradient: linear-gradient(
    110deg,
    var(--gamble-orange-950),
    var(--gamble-black-800) 65%
  );
  --ui-hero-gradient: linear-gradient(
    120deg,
    var(--gamble-orange-800),
    var(--gamble-orange-900) 43%,
    var(--gamble-orange-950) 78%,
    var(--gamble-black-800)
  );
  --ui-radius-panel: 20px;
  --ui-radius-control: 12px;
  --ui-touch: 44px;
  --ui-space-label: 8px;
  --ui-space-control: 12px;
  --ui-space-toolbar: 16px;
  --ui-space-field: 20px;
  --ui-space-action: 24px;
  --ui-space-section: 28px;
  --ui-space-panel: 24px;
  --ui-space-panel-mobile: 20px;
  --dock-reserve: calc(var(--safe-bottom) + var(--dock-gap) + var(--dock-h));

  /* ===== Motion (GOS-2a) ===== */
  /* Main easing — fast start, gentle settle. Used for app open/close VT. */
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  /* Springy back-overshoot — tile stagger, badge pop (GOS-2b). */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}