/**
 * Kwit Onboarding — Design Tokens
 *
 * Single source of truth for all visual constants.
 * All components reference these tokens — never hardcode colors, sizes, or spacing.
 *
 * Naming convention:
 *   --color-{name}          → base color
 *   --color-{name}-light    → tinted variant (backgrounds)
 *   --color-{name}-dark     → darkened variant (active states, contrast)
 *   --color-{name}-bg       → very subtle background tint
 */
:root {
  /* ── Brand Colors ── */
  --color-primary: #00D68B;         /* Kwit green — CTAs, active states, links */
  --color-primary-light: #E5FBF3;   /* Light green tint — selected card backgrounds */
  --color-primary-dark: #00B576;    /* Dark green — button active/press state */
  --color-primary-bg: rgba(0, 214, 139, 0.08); /* Subtle green wash */

  /* ── Text Colors ── */
  --color-text: #2D3436;            /* Primary text — headings, body */
  --color-text-secondary: #636E72;  /* Secondary text — labels, descriptions */
  --color-text-muted: #B2BEC3;      /* Muted text — placeholders, hints */

  /* ── Surface Colors ── */
  --color-bg: #F5F9F8;              /* Page background (mobile) */
  --color-bg-white: #FFFFFF;        /* App container background */
  --color-card: #FFFFFF;            /* Card/bubble backgrounds */
  --color-border: #E8ECEF;          /* Default borders, dividers */
  --color-border-active: #00D68B;   /* Active/focused input borders */

  /* ── Semantic Colors ── */
  --color-error: #E74C3C;           /* Validation errors */
  --color-yellow: #FFD93D;          /* Stars, highlights */

  /* ── Form Cells (mirror iOS FormDefaultListCell) ── */
  --color-cell-text: #494949;       /* primaryDarkGrayAdaptive */
  --color-cell-icon: #C8D2DC;       /* primaryLightGrayAdaptive — template icon tint */
  --color-cell-border: #F0F0F0;     /* primaryDiscreteGrayAdaptive */

  /* ── Character Colors (name badges) ── */
  --color-albert-bg: #C8F7E6;       /* Albert (doctor) — green badge */
  --color-jean-bg: #FFD6D6;         /* Jean (coach) — pink badge */

  /* ── Transition Screens ── */
  --color-transition-bg: #00D68B;    /* Full-screen green background */
  --color-transition-text: #FFFFFF;

  /* ── Typography ── */
  --font-family: 'Montserrat', system-ui, -apple-system, sans-serif;

  --font-size-xs: 0.75rem;    /* 12px — footnotes, badges */
  --font-size-sm: 0.875rem;   /* 14px — secondary text, labels */
  --font-size-md: 1rem;       /* 16px — body text (base) */
  --font-size-lg: 1.125rem;   /* 18px — card text, inputs */
  --font-size-xl: 1.375rem;   /* 22px — section headings */
  --font-size-2xl: 1.75rem;   /* 28px — screen titles */

  --font-weight-regular: 400;
  --font-weight-medium: 500;   /* Option labels, nav buttons */
  --font-weight-semibold: 600; /* Subheadings, badges */
  --font-weight-bold: 700;     /* Titles, CTAs, emphasis */

  --line-height-tight: 1.2;    /* Headings */
  --line-height-normal: 1.5;   /* Body text */
  --line-height-relaxed: 1.7;  /* Long-form content */

  /* ── Spacing Scale (4px base) ── */
  --space-2xs: 0.25rem;  /*  4px */
  --space-xs: 0.5rem;    /*  8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 2.5rem;   /* 40px */
  --space-3xl: 3rem;     /* 48px */

  /* ── Border Radii ── */
  --radius-sm: 8px;       /* Inputs, small cards */
  --radius-md: 12px;      /* Option cards, feature cards */
  --radius-lg: 16px;      /* Bubbles, large cards */
  --radius-xl: 24px;      /* Welcome card, info bubbles */
  --radius-full: 9999px;  /* Pills, badges, round buttons */

  /* ── Shadows ── */
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.07), 0 10px 24px -10px rgba(15, 23, 42, 0.12);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.09), 0 18px 36px -14px rgba(15, 23, 42, 0.16);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1), 0 28px 56px -16px rgba(15, 23, 42, 0.2);

  /* ── Easing Curves (Emil Kowalski style — stronger than built-in) ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* UI interactions, entering elements */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* On-screen movement, morphing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Bouncy feedback, selection pop */

  /* ── Transitions ── */
  --transition-fast: 150ms var(--ease-out);    /* Hover/active state changes */
  --transition-normal: 250ms var(--ease-out);  /* Card selections, input focus */
  --transition-slow: 400ms var(--ease-out);    /* Screen transitions, progress bar */

  /* ── Layout ── */
  --max-width: 480px;               /* App container max width */
  --header-height: 56px;            /* Nav bar height */
  --progress-height: 4px;           /* Progress bar thickness */
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* iPhone safe area */
}