/* ==========================================================================
   Loam Design Tokens
   Extracted from loam-app/flutter_app/lib/theme/loam_theme.dart
   ========================================================================== */

:root {
  /* Backgrounds */
  --cream: #F8F4EE;
  --cream-warm: #F2ECE2;
  --cream-deep: #EBE3D6;
  --parchment: #F5F0E8;
  --stone: #E4DDD3;

  /* Text / ink */
  --ink: #2C2825;
  --ink-soft: #4A4543;
  --ink-muted: #8A8481;
  --ink-faint: #B8B3AE;
  --ink-ghost: #D6D1CC;

  /* Accents */
  --sage: #7E9B6D;
  --sage-soft: #9DB48E;
  --sage-wash: rgba(126, 155, 109, 0.10);
  --clay: #C08B5C;
  --clay-wash: rgba(192, 139, 92, 0.10);
  --terracotta: #B05A3A;
  --terracotta-wash: rgba(176, 90, 58, 0.08);
  --ochre: #D4A24E;
  --ochre-wash: rgba(212, 162, 78, 0.10);
  --moss: #5A6E4A;
  --bark: #2C2825;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 40px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(44, 40, 37, 0.04), 0 8px 32px rgba(44, 40, 37, 0.06);
  --shadow-float: 0 8px 24px rgba(44, 40, 37, 0.08), 0 24px 64px rgba(44, 40, 37, 0.12);
  --shadow-deep: 0 16px 48px rgba(44, 40, 37, 0.12), 0 32px 80px rgba(44, 40, 37, 0.16);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 120px;

  /* Typography */
  --font: 'Onest', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}