/* Rare Convenience — design tokens v1.0.0
   Generated from branding/tokens.json. Do not edit by hand.
   Visual spec: "Rare Convenience Brand Kit.dc.html" at project root. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* brand */
  --rare-accent: #00A67E;
  --rare-accent-deep: #00805F;
  --rare-accent-bright: #00C795;
  --rare-accent-tint: #E6F6F1;
  --rare-ink: #14161A;

  /* light theme (back office, web) */
  --rare-canvas: #F7F8FA;
  --rare-surface: #FFFFFF;
  --rare-line: #E2E5EA;
  --rare-line-soft: #EEF0F3;
  --rare-muted: #6B7280;
  --rare-faint: #9096A1;
  --rare-text: #14161A;

  /* status — accent doubles as LIVE, by design */
  --rare-live: #00A67E;
  --rare-warning: #F5A524;
  --rare-error: #E5484D;
  --rare-offline: #6B7280;

  /* type */
  --rare-font-brand: Archivo, system-ui, sans-serif;
  --rare-font-ui: Archivo, system-ui, sans-serif;
  --rare-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --rare-text-display: 52px;
  --rare-text-heading: 24px;
  --rare-text-register: 17px;
  --rare-text-body: 15px;
  --rare-text-small: 13px;
  --rare-text-label: 11px;
  --rare-text-money: 40px;

  /* space */
  --rare-space-1: 4px;  --rare-space-2: 8px;  --rare-space-3: 12px;
  --rare-space-4: 16px; --rare-space-5: 20px; --rare-space-6: 26px;
  --rare-space-7: 34px; --rare-space-8: 44px; --rare-space-9: 56px;
  --rare-space-10: 72px; --rare-space-11: 88px;

  /* radius */
  --rare-radius-sm: 6px;  --rare-radius-md: 10px; --rare-radius-lg: 12px;
  --rare-radius-xl: 16px; --rare-radius-2xl: 18px; --rare-radius-pill: 9999px;

  /* targets */
  --rare-target-backoffice: 48px;
  --rare-target-register: 56px;
  --rare-topbar-height: 56px;

  /* elevation */
  --rare-shadow-card: 0 8px 24px rgba(20,22,26,0.08);
  --rare-shadow-modal: 0 18px 44px rgba(20,22,26,0.22);

  /* motion */
  --rare-motion-fast: 120ms ease;
  --rare-motion-base: 180ms ease;
}

/* dark theme — every register screen */
[data-theme="dark"] {
  --rare-canvas: #0A0B0D;
  --rare-surface: #15171C;
  --rare-surface-alt: #0F1115;
  --rare-line: #23262D;
  --rare-line-soft: #1D2027;
  --rare-muted: #8B919B;
  --rare-faint: #5B616B;
  --rare-text: #F2F3F5;
  --rare-shadow-card: 0 8px 24px rgba(0,0,0,0.4);
  --rare-shadow-modal: 0 18px 44px rgba(0,0,0,0.6);
}

@keyframes rare-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }