
:root {
  --color-primary: #84CC16;
  --color-primary-hover: #65A30D;
  --color-primary-active: #4D7C0F;
  --color-primary-subtle: #ECFCCB;
  --color-primary-text: #111827;
  --color-primary-text-dark: #4D7C0F;
  --color-primary-border: rgba(132, 204, 22, 0.3);

  --color-emerald-500: #84CC16;
  --color-emerald-600: #65A30D;

  --color-bg-page: #F6F7F9;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F0F2F5;
  --color-bg-muted: #E5E7EB;

  --color-border: #EAECEF;
  --color-border-hover: #D1D5DB;
  --color-border-subtle: #F2F3F5;
  --color-border-strong: #9CA3AF;

  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --color-text-main: #111827;  --color-text-secondary: #4B5563;  --color-text-muted: #6B7280;  --color-text-subtle: #9CA3AF;  --color-text-inverse: #FFFFFF;

  --text-2xs: 0.6875rem;  --text-xs: 0.75rem;  --text-sm: 0.8125rem;  --text-base: 0.875rem;  --text-md: 0.9375rem;  --text-lg: 1rem;  --text-xl: 1.125rem;  --text-2xl: 1.25rem;  --text-3xl: 1.5rem;  --text-4xl: 1.75rem;
  --color-danger: #EF4444;
  --color-danger-hover: #DC2626;
  --color-danger-subtle: #FEE2E2;
  --color-danger-text: #B91C1C;

  --color-warning: #F59E0B;
  --color-warning-hover: #D97706;
  --color-warning-subtle: #FEF3C7;
  --color-warning-text: #92400E;

  --color-success: #00D06C;
  --color-success-hover: #00B85E;
  --color-success-subtle: #E6FBF1;
  --color-success-text: #047857;

  --color-info: #3B82F6;
  --color-info-hover: #2563EB;
  --color-info-subtle: #DBEAFE;
  --color-info-text: #1D4ED8;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;

  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --radius-medium: var(--radius-lg);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);

  --focus-ring-color: var(--color-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-field-border: var(--color-primary);
  --focus-field-shadow: 0 0 0 2px rgba(132, 204, 22, 0.25);
  --focus-ring: var(--focus-field-shadow);

  --motion-fast: 140ms cubic-bezier(0.2, 0, 0, 1);
  --motion-base: 200ms cubic-bezier(0.2, 0, 0, 1);
  --motion-slow: 300ms cubic-bezier(0.2, 0, 0, 1);
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  --safe-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px));
  --safe-right: var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px));
  --tg-chrome-top: var(--tg-content-safe-area-inset-top, 0px);
  --tg-chrome-bottom: var(--tg-content-safe-area-inset-bottom, 0px);
  --tg-safe-bottom: calc(var(--safe-bottom) + var(--tg-chrome-bottom));
  --nav-height: 60px;
  --input-bg: var(--color-bg-subtle);

  --accent-color: var(--color-primary);
  --accent-color-hover: var(--color-primary-hover);
  --accent-color-active: var(--color-primary-active);
  --accent-ink: #111827;
  --color-accent: var(--color-primary);

  --market-accent: var(--color-primary);
  --market-accent-dark: var(--color-primary-hover);
  --market-accent-tint: var(--color-primary-subtle);
  --market-ink: var(--color-text-main);
  --market-muted: var(--color-text-muted);
  --market-line: var(--color-border);
  --market-soft: var(--color-bg-page);
  --market-shadow: var(--shadow-card);

  --pp-lime: var(--color-primary);
  --pp-lime-ink: #111827;
  --pp-ink: var(--color-text-main);
  --pp-muted: var(--color-text-muted);
  --pp-line: var(--color-border);
  --pp-surface: var(--color-bg-subtle);
  --pp-radius: var(--radius-card);
  --pp-pad: 16px;

  --rl-bg: var(--color-bg-page);
  --rl-bg-warm: var(--color-bg-page);
  --rl-surface: var(--color-bg-surface);
  --rl-surface-soft: var(--color-bg-subtle);
  --rl-text: var(--color-text-main);
  --rl-muted: var(--color-text-muted);
  --rl-border: var(--color-border);
  --rl-accent: var(--color-primary);
  --rl-accent-strong: var(--color-primary-hover);
  --rl-accent-soft: var(--color-primary-subtle);
  --rl-warning: var(--color-warning-subtle);
  --rl-warning-border: var(--color-warning);
  --rl-shadow: var(--shadow-modal);
  --rl-shadow-soft: var(--shadow-card);
  --rl-radius-xl: var(--radius-2xl);
  --rl-radius-lg: var(--radius-xl);
  --rl-radius-md: var(--radius-md);

  --referral-ink: var(--color-text-main);
  --referral-muted: var(--color-text-muted);
  --referral-line: var(--color-border);
  --referral-paper: var(--color-bg-surface);
  --referral-soft: var(--color-bg-subtle);
  --referral-accent: var(--color-primary);

  --bg-page: var(--color-bg-page);
  --bg-card: var(--color-bg-surface);
  --bg-subtle: var(--color-bg-subtle);
  --text-main: var(--color-text-main);
  --text-muted: var(--color-text-muted);
  --border-subtle: var(--color-border);
  --glass-bg: #FFFFFF;
  --glass-border: var(--color-border);
  --glass-blur: 0px;
}

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

