/* dpdpsuite design tokens (AUTHORITATIVE). Mirrored in sdk/react-native/src/theme.ts.
   Append new tokens at the end; do not rename existing ones. */
:root {
  /* Brand — deep teal */
  --dps-brand-950: #062a2d;
  --dps-brand-900: #0b3b3f;
  --dps-brand-800: #0c525a;
  --dps-brand-700: #0e6b73;
  --dps-brand-600: #0f7c86;
  --dps-brand-500: #14919b;
  --dps-brand-400: #3fb3bb;
  --dps-brand-300: #7ccfd4;
  --dps-brand-200: #a8e0e3;
  --dps-brand-100: #d5f1f2;
  --dps-brand-50: #eef9f9;

  /* Organisation brand (overridden per org on hosted pages via inline style="--dps-org: #xxxxxx") */
  --dps-org: var(--dps-brand-600);

  /* Accent — warm amber for highlights */
  --dps-accent-600: #d97706;
  --dps-accent-500: #f59e0b;
  --dps-accent-100: #fef3c7;

  /* Neutrals (slate) */
  --dps-ink-950: #0b1220;
  --dps-ink-900: #0f172a;
  --dps-ink-800: #1e293b;
  --dps-ink-700: #334155;
  --dps-ink-600: #475569;
  --dps-ink-500: #64748b;
  --dps-ink-400: #94a3b8;
  --dps-ink-300: #cbd5e1;
  --dps-ink-200: #e2e8f0;
  --dps-ink-100: #f1f5f9;
  --dps-ink-50: #f8fafc;
  --dps-canvas: #f6f8fa;
  --dps-surface: #ffffff;
  --dps-border: #e2e8f0;
  --dps-border-strong: #cbd5e1;

  /* Semantic */
  --dps-success-700: #15803d;
  --dps-success-600: #16a34a;
  --dps-success-100: #dcfce7;
  --dps-warning-700: #b45309;
  --dps-warning-600: #d97706;
  --dps-warning-100: #fef3c7;
  --dps-danger-700: #b91c1c;
  --dps-danger-600: #dc2626;
  --dps-danger-100: #fee2e2;
  --dps-info-700: #1d4ed8;
  --dps-info-600: #2563eb;
  --dps-info-100: #dbeafe;

  /* Typography */
  --dps-font-sans: "Inter Variable", "Inter", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dps-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --dps-text-xs: 0.75rem;
  --dps-text-sm: 0.875rem;
  --dps-text-base: 1rem;
  --dps-text-lg: 1.125rem;
  --dps-text-xl: 1.25rem;
  --dps-text-2xl: 1.5rem;
  --dps-text-3xl: 1.875rem;
  --dps-text-4xl: 2.25rem;
  --dps-text-5xl: 3rem;
  --dps-leading-tight: 1.2;
  --dps-leading-snug: 1.35;
  --dps-leading-normal: 1.55;

  /* Spacing (4px grid) */
  --dps-space-1: 4px;
  --dps-space-2: 8px;
  --dps-space-3: 12px;
  --dps-space-4: 16px;
  --dps-space-5: 20px;
  --dps-space-6: 24px;
  --dps-space-8: 32px;
  --dps-space-10: 40px;
  --dps-space-12: 48px;
  --dps-space-16: 64px;
  --dps-space-20: 80px;

  /* Radii */
  --dps-radius-xs: 6px;
  --dps-radius-sm: 8px;
  --dps-radius-md: 12px;
  --dps-radius-lg: 16px;
  --dps-radius-xl: 24px;
  --dps-radius-pill: 999px;

  /* Elevation */
  --dps-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --dps-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1);
  --dps-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --dps-shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --dps-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.22);
  --dps-shadow-focus: 0 0 0 3px rgba(20, 145, 155, 0.35);
  --dps-shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.3);

  /* Gradients */
  --dps-gradient-hero:
    radial-gradient(900px 380px at 12% -10%, rgba(124, 207, 212, 0.35), transparent 60%),
    radial-gradient(700px 300px at 95% 10%, rgba(245, 158, 11, 0.18), transparent 60%),
    linear-gradient(135deg, #062a2d 0%, #0b3b3f 35%, #0e6b73 75%, #14919b 100%);
  --dps-gradient-brand: linear-gradient(135deg, #0e6b73 0%, #14919b 100%);
  --dps-gradient-soft: linear-gradient(180deg, #eef9f9 0%, #f6f8fa 100%);

  /* Motion */
  --dps-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dps-dur-fast: 150ms;
  --dps-dur: 220ms;
  --dps-dur-slow: 360ms;

  /* Layout */
  --dps-container: 1120px;
  --dps-container-narrow: 760px;
  --dps-sidebar: 256px;
  --dps-topbar: 64px;
  --dps-z-sticky: 20;
  --dps-z-overlay: 40;
  --dps-z-modal: 50;
  --dps-z-toast: 60;
}

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