/* ============================================
   VARIABLES — Tasty Chef Design Tokens
   ============================================ */

:root {

  /* --- Brand Colors --- */
  --color-primary:       #FF1E8C;    
  --color-primary-dark:  #D4006E;  
  --color-primary-light: #FFE8F4;  

  /* --- Backgrounds --- */
  --color-bg:            #FAFAFA;  /* App background — warm off-white */
  --color-surface:       #FFFFFF;  /* Cards, modals, inputs */
  --color-surface-2:     #F0EDE8;  /* Subtle section dividers */

  /* --- Text --- */
  --color-text:          #1A1A1A;  /* Primary text */
  --color-text-muted:    #777777;  /* Secondary text, placeholders */
  --color-text-light:    #AAAAAA;  /* Disabled, hints */

  /* --- Borders --- */
  --color-border:        #E8E4DF;  /* Input borders, card dividers */

  /* --- Semantic Colors --- */
  --color-success:       #2A9D5C;  /* Delivered, confirmed */
  --color-warning:       #F5A623;  /* Preparing */
  --color-danger:        #E03131;  /* Remove, errors */
  --color-info:          #3B82F6;  /* Info states */

  /* --- Bottom Navigation --- */
  --color-nav-bg:        #FFFFFF;
  --color-nav-active:    #FF1E8C;
  --color-nav-inactive:  #AAAAAA;

  /* --- Typography --- */
  --font-display:  'Sora', sans-serif;   /* Headings, brand */
  --font-body:     'Inter', sans-serif;  /* Body, labels, buttons */

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.75rem;   /* 28px */
  --text-3xl:  2rem;      /* 32px */

  /* --- Spacing (8px base unit) --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* --- Border Radius --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-nav: 0 -4px 16px rgba(0, 0, 0, 0.06);

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* --- Z-index layers --- */
  --z-base:    1;
  --z-sticky:  10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;

  /* --- Layout --- */
  --max-width:     480px;   /* Max app width on large screens */
  --nav-height:    64px;    /* Bottom nav height */
  --header-height: 60px;    /* Top header height */
}