/* stepful-tokens.css — SDS subset (consumer mode).
   Source: stepful/app/javascript/lib/theme/foundations/
   Curated; refresh if SDS changes meaningfully. */
:root {
  /* Brand — coral palette (the primary brand color in consumer mode) */
  --sds-coral-50: #ffebeb;
  --sds-coral-100: #fac7c7;
  --sds-coral-200: #ff9999;
  --sds-coral-300: #ff7777;
  --sds-coral-400: #ec5555;

  /* Sand palette (warm neutrals; brand background in business mode) */
  --sds-sand-50: #fffaf0;
  --sds-sand-100: #fdf3dd;
  --sds-sand-200: #efe5d1;
  --sds-sand-300: #dbcdb3;
  --sds-sand-800: #4f4a40;
  --sds-sand-900: #302f2c;

  /* Semantic fills */
  --sds-fill-brand: var(--sds-coral-300);
  --sds-fill-brand-strong: var(--sds-coral-400);
  --sds-fill-brand-muted: var(--sds-coral-100);
  --sds-fill-brand-soft: var(--sds-coral-50);
  --sds-fill-positive: #38a169;   /* green.600 */
  --sds-fill-negative: #e53e3e;   /* red.500 */
  --sds-fill-attention: #dd6b20;  /* orange.500 */

  /* Semantic text */
  --sds-text-primary: #2d3748;    /* gray.700 */
  --sds-text-secondary: #4a5568;  /* gray.600 */
  --sds-text-tertiary: #718096;   /* gray.500 */
  --sds-text-accent: var(--sds-coral-400);
  --sds-text-on-dark: #ffffff;

  /* Semantic backgrounds */
  --sds-bg-default: #ffffff;
  --sds-bg-secondary: #f7fafc;    /* gray.50 */
  --sds-bg-brand: var(--sds-sand-50);
  --sds-bg-dark: #1a202c;          /* gray.800 */

  /* Borders */
  --sds-border-default: #e2e8f0;  /* gray.200 */
  --sds-border-strong: #cbd5e0;   /* gray.300 */

  /* Radii */
  --sds-radii-xs: 2px;
  --sds-radii-sm: 4px;
  --sds-radii-md: 8px;
  --sds-radii-lg: 16px;
  --sds-radii-full: 9999px;

  /* Font families (SDS uses brand fonts in main app; fall back to system) */
  --sds-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sds-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sds-font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;

  /* Typography sizes */
  --sds-text-body-sm: 0.875rem;
  --sds-text-body: 1rem;
  --sds-text-body-lg: 1.125rem;
  --sds-text-heading-sm: 1rem;
  --sds-text-heading-md: 1.25rem;
  --sds-text-heading-lg: 1.5rem;
  --sds-text-display-sm: 1.5rem;
  --sds-text-display-md: 2rem;
  --sds-text-display-lg: 2.5rem;

  /* Body defaults */
  font-family: var(--sds-font-body);
  color: var(--sds-text-primary);
  background: var(--sds-bg-default);
}

body { font-family: var(--sds-font-body); color: var(--sds-text-primary); background: var(--sds-bg-default); margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--sds-font-heading); color: var(--sds-text-primary); }
a { color: var(--sds-text-accent); }