/* ==========================================================================
   TEA DESIGN SYSTEM — CSS TOKENS
   Synchronized with design.md and visual mockups
   ========================================================================== */

:root {
  /* Brand Core Colors */
  --tea-orange: #FF4800;
  --tea-orange-hover: #E63E00;
  --tea-orange-light: #FFF0EB;
  --tea-orange-glow: rgba(255, 72, 0, 0.28);
  --tea-orange-gradient: linear-gradient(135deg, #FF5500 0%, #FF3300 100%);

  /* Warm Cream Canvas & Surfaces */
  --color-canvas: #FAF7F2;
  --color-canvas-subtle: #F3EFE8;
  --color-card-surface: #FFFFFF;
  --color-card-tint: #FDF9F3;
  --color-card-hover: #FFFDF9;
  
  /* Typography Colors */
  --text-primary: #181715;
  --text-secondary: #5A5852;
  --text-tertiary: #8C8980;
  --text-muted: #B0ACA2;
  --text-inverse: #FFFFFF;

  /* Borders & Dividers */
  --border-subtle: #EFE9DE;
  --border-medium: #E2DBD0;
  --border-focus: #FF4800;

  /* Category Pastel Backgrounds & Text */
  --cat-relationships-bg: #FFE8E8;
  --cat-relationships-text: #E02E2E;
  
  --cat-work-bg: #FFF3D6;
  --cat-work-text: #B47303;
  
  --cat-college-bg: #EAF5EA;
  --cat-college-text: #3B7E35;
  
  --cat-funny-bg: #FFF0D9;
  --cat-funny-text: #D97308;
  
  --cat-confessions-bg: #FFEAE0;
  --cat-confessions-text: #D64500;
  
  --cat-drama-bg: #FFF2D1;
  --cat-drama-text: #D98200;

  --cat-friendship-bg: #EAEFF2;
  --cat-friendship-text: #2B698C;

  /* Reaction Colors */
  --react-hype: #FF4800;
  --react-validate: #558B2F;
  --react-curious: #E69500;
  --react-redflag: #D32F2F;

  /* Mascot Tone Fills */
  --spirit-coral: #FF7666;
  --spirit-olive: #97A85A;
  --spirit-lemon: #F5C747;
  --spirit-mint: #5DC499;

  /* Typography Families */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Cabinet Grotesk', 'Plus Jakarta Sans', sans-serif;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(35, 30, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(35, 30, 20, 0.06), 0 1px 3px rgba(35, 30, 20, 0.02);
  --shadow-lg: 0 16px 40px rgba(35, 30, 20, 0.08), 0 2px 6px rgba(35, 30, 20, 0.03);
  --shadow-floating: 0 20px 48px rgba(255, 72, 0, 0.22), 0 4px 12px rgba(255, 72, 0, 0.12);
  --shadow-card-hover: 0 18px 42px rgba(35, 30, 20, 0.09), 0 2px 8px rgba(35, 30, 20, 0.03);
  --shadow-device: 0 25px 60px -12px rgba(30, 20, 10, 0.25), 0 18px 36px -18px rgba(30, 20, 10, 0.15);

  /* Corner Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Transition timings */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}