/* ==========================================================================
   NFC Kart — design tokens (light, soft pastel SaaS / smart-card look)
   Load order: tokens.css -> site.css -> cards.css -> admin.css
   ========================================================================== */
:root {
  /* Surfaces */
  --bg: #f3f5fb;
  --bg-tint-1: #e6ebfb;           /* soft periwinkle glow */
  --bg-tint-2: #e3f4f0;           /* soft mint glow */
  --surface: #ffffff;
  --surface-soft: #f7f8fd;
  --surface-muted: #eef1f9;

  /* Text */
  --text: #1c2340;
  --muted: #5b6684;
  --on-primary: #ffffff;

  /* Brand */
  --primary: #4a58d6;
  --primary-hover: #3b47b8;
  --primary-soft: #e8ebfd;
  --accent: #0f9d8f;
  --accent-soft: #def5f1;

  /* Status */
  --success: #1b7f55;
  --success-soft: #e3f6ec;
  --warning: #9a6200;
  --warning-soft: #fff3d9;
  --danger: #c0334a;
  --danger-hover: #a02a3e;
  --danger-soft: #fdecef;

  /* Lines */
  --border: #dde2f0;
  --border-strong: #c3cbe2;
  --focus-ring: rgba(74, 88, 214, 0.45);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Shadow (soft, low-contrast) */
  --shadow-sm: 0 1px 2px rgba(28, 35, 64, 0.05), 0 2px 8px rgba(28, 35, 64, 0.04);
  --shadow-md: 0 6px 20px rgba(28, 35, 64, 0.07);
  --shadow-lg: 0 16px 40px rgba(28, 35, 64, 0.10);
  --shadow-cta: 0 6px 16px rgba(74, 88, 214, 0.28);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Type */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Touch target */
  --tap: 44px;

  /* Legacy aliases (older markup / inline styles) */
  --ink: var(--text);
  --ok: var(--success);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-md);
  --accent-hover: var(--primary-hover);
}