/* ============================================================
   stepupper — design tokens (single source)
   Loyyal design system as CSS custom properties. Consumed by
   apps/web (imported before global.css) and apps/landing (copied
   to css/tokens.css by the landing build).
   Rule: font-weight ceiling is 500 (--w-medium).
   ============================================================ */

:root {
  /* --- Color --- */
  --c-brand: #1a5bfa; /* action / primary CTA */
  --c-brand-strong: #0d3baf;
  --c-success: #34d399; /* emerald accent / status dot */
  --c-danger: #b91c1c;
  --c-danger-soft: rgba(220, 38, 38, 0.08);
  --c-warning-ink: #9a7d00;
  --c-surface: #cffafe; /* cyan filled panels */
  --c-accent: #ffd400; /* yellow filled panels */
  --c-ink: #09090b; /* near-black text / dark buttons */
  --c-ink-hover: #27272a;
  --c-ghost-hover: #fafafa;
  --c-bg: #ffffff;
  --c-theme: #ffffff; /* browser chrome (theme-color) */
  --c-border: #e4e4e7; /* hairline borders */
  --c-on-dark: #ffffff;

  /* muted ink steps (derived, stay on-palette) */
  --c-ink-70: rgba(9, 9, 11, 0.7);
  --c-ink-55: rgba(9, 9, 11, 0.55);
  --c-ink-40: rgba(9, 9, 11, 0.4);
  --c-ink-05: rgba(9, 9, 11, 0.05);

  /* --- Gradients --- */
  --grad-brand: linear-gradient(135deg, #1a5bfa 0%, #34d399 100%);
  --grad-cyan: linear-gradient(135deg, #c7f5ff, #8fe8f1);
  --grad-yellow: linear-gradient(135deg, #ffd400, #ffe45c);
  --grad-deep: linear-gradient(140deg, #2c72f0, #133fb8 55%, #0a2e8a);
  /* soft multi-color radial wash for the page background */
  --grad-wash:
    radial-gradient(circle at 18% 18%, rgba(52, 211, 153, 0.16), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(26, 91, 250, 0.12), transparent 30%),
    radial-gradient(circle at 78% 84%, rgba(255, 214, 0, 0.18), transparent 32%);

  /* --- Radius --- */
  --r-ring: 16px; /* outer frame */
  --r-card: 15px; /* tiles / cards */
  --r-chip: 6px; /* chips / brand mark */
  --r-pill: 9999px; /* buttons / pills */

  /* --- Spacing (4px base rhythm) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --gap: 8px; /* tile gap in the framed grid */
  --shell: 96rem; /* max container width */

  /* --- Type --- */
  --font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji',
    'Segoe UI Emoji', sans-serif;
  --ls: -0.025em; /* tight tracking */
  --ls-wide: 0.14em; /* tracked-out labels */
  --w-light: 300;
  --w-normal: 400;
  --w-medium: 500;

  /* --- Motion --- */
  --dur: 150ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Glass --- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: 20px;

  /* --- Elevation --- */
  --shadow: 0 8px 40px rgba(9, 9, 11, 0.14);
  --shadow-sm: 0 2px 12px rgba(9, 9, 11, 0.08);
}

/* ============================================================
   Primitive scales (design system v2, docs/design/design-system.md §1).
   Appended only: every line above stays byte-identical for the landing.
   Components never bind to these directly; apps/web maps them to semantic
   tokens (light + dark) in apps/web/src/styles/theme.css.
   ============================================================ */

:root {
  /* --- Brand blue --- */
  --brand-50: #eff4ff;
  --brand-100: #dfe8ff;
  --brand-200: #c3d5fe;
  --brand-300: #9dbafd;
  --brand-400: #76a0fc;
  --brand-500: #4a80fb;
  --brand-600: #1a5bfa; /* = --c-brand */
  --brand-700: #134ad8;
  --brand-800: #0d3baf;
  --brand-900: #0f3289;
  --brand-950: #0c1f55;

  /* --- Neutral (zinc based; 350–600 tuned for WCAG AA) --- */
  --zinc-0: #ffffff;
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-350: #b4b4bc;
  --zinc-400: #9898a0;
  --zinc-500: #8a8a93;
  --zinc-600: #65656e;
  --zinc-700: #52525b;
  --zinc-750: #3f3f46;
  --zinc-800: #27272a;
  --zinc-850: #1f1f23;
  --zinc-900: #18181b;
  --zinc-925: #0f0f11;
  --zinc-950: #09090b;

  /* --- Status ramps (only the steps in use) --- */
  --emerald-50: #ecfdf5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;

  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;

  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
}