/* SkillBridge Design Tokens
   Matches app brand: soft, warm, playful. */

:root {
  /* === Brand Palette === */
  --lavender: #F5F0F6;
  --lavender-deep: #E8DFE9;
  --cream: #FAF5F0;
  --white: #FFFFFF;
  --text-dark: #1F2937;
  --text-medium: #6B7280;
  --text-light: #9CA3AF;

  /* Accent spectrum */
  --mint: #10B981;
  --mint-soft: #D1FAE5;
  --coral: #F97316;
  --coral-soft: #FFEDD5;
  --purple: #8B5CF6;
  --purple-soft: #EDE9FE;
  --pink: #EC4899;
  --pink-soft: #FCE7F3;
  --blue: #3B82F6;
  --blue-soft: #DBEAFE;
  --lime: #84CC16;
  --lime-soft: #ECFCCB;

  /* === App Brand Colors (shared with future phases) === */
  --color-primary: #7C3AED;
  --color-primary-light: #8B5CF6;
  --color-primary-dark: #6D28D9;
  --color-bg: #F5F0F6;
  --color-bg-dark: #1a0a2e;
  --color-text: #1F2937;
  --color-text-light: #6B7280;
  --color-text-on-dark: #F9FAFB;
  --color-accent-teal: #10B981;
  --color-accent-pink: #EC4899;

  /* === Typography === */
  --ff-display: 'Nunito', 'Rounded Mplus 1c', sans-serif;
  --ff-body: 'Nunito', -apple-system, sans-serif;
  --font-family: var(--ff-body);
  --font-size-display: clamp(2rem, 5vw, 3.5rem);
  --font-size-heading: clamp(1.25rem, 3vw, 1.75rem);
  --font-size-body: clamp(0.875rem, 2vw, 1.125rem);
  --font-size-caption: clamp(0.75rem, 1.5vw, 0.875rem);
  --font-weight-bold: 800;
  --font-weight-semibold: 700;
  --font-weight-regular: 400;

  /* === Spacing === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-xxl: 64px;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 8px 30px rgba(139, 92, 246, 0.08);

  /* === Animation === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-slow: 1.5s;
  --duration-normal: 0.6s;
}