/* ============================================
   Tasty – Designsystem v2
   ============================================ */

:root {
  /* Palette */
  --terracotta:   #E2725B;
  --basil-green:  #576930;
  --tomato-red:   #D13628;
  --olive-wood:   #7B6648;

  /* Baggrunde */
  --color-bg:           #F5EDE8;   /* Varm terracotta-lys baggrund */
  --color-white:        #FDFAF7;
  --color-card:         #FDFAF7;

  /* Kortfarver (cykleres) */
  --color-card-orange:  #E2725B;
  --color-card-sage:    #D6DEC8;
  --color-card-cream:   #EEE0D4;
  --color-card-mint:    #C9D4B8;

  /* Tekst */
  --color-text-dark:    #2A1F1A;
  --color-text-mid:     #5A4A40;
  --color-text-light:   #9A8878;
  --color-text-white:   #FFFFFF;

  /* Tags */
  --color-tag-bg:       #D6DEC8;
  --color-tag-text:     #576930;

  /* Accenter */
  --color-accent:       #E2725B;   /* Terracotta */
  --color-accent-dark:  #576930;   /* Basil Green – primær knap */
  --color-danger:       #D13628;   /* Tomato Red */

  /* Kant og divider */
  --color-border:       #DDD0C4;

  /* Font – bold moderne sans-serif */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Radii */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-pill: 100px;

  /* Skygger */
  --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-nav:  0 -1px 0 rgba(0,0,0,0.06);

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* Navigation */
  --nav-height:  64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}