/* ============================================
   Theme — Color System for Light & Dark Modes
   All colors should use variables from this file
   ============================================ */

/* ============================================
   PRIMITIVE COLOR SCALES
   Fixed values — not mode-dependent.
   Use these to compose semantic tokens below.
   ============================================ */
:root {
  /* Green */
  --color-green-100: #dcfce7;
  --color-green-300: #4ade80;
  --color-green-500: #22c55e;
  --color-greenalt-500: #7bd81e;
  --color-green-700: #16a34a;
  --color-green-900: #14532d;

  /* Red */
  --color-red-100: #fee2e2;
  --color-red-300: #f87171;
  --color-red-500: #ef4444;
  --color-red-700: #dc2626;
  --color-red-900: #7f1d1d;

  /* Blue */
  --color-blue-100: #dbeafe;
  --color-blue-300: #93c5fd;
  --color-blue-500: #3b82f6;
  --color-blue-700: #2563eb;
  --color-blue-900: #1e3a8a;

  /* Orange */
  --color-orange-100: #ffedd5;
  --color-orange-300: #fdba74;
  --color-orange-500: #FA7316; /* brand orange */
  --color-orange-700: #ea580c;
  --color-orange-900: #7c2d12;

  /* Purple */
  --color-purple-100: #f3e8ff;
  --color-purple-300: #d8b4fe;
  --color-purple-500: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-900: #6b21a8;

  /* Gray scale */
  --gray-50:  #f9fafb;
  --gray-100: #f1f5f9;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Yellow */
  --color-yellow-100: #fef9c3;
  --color-yellow-300: #f7f304;  
  --color-yellow-500: #ffd104;
  --color-yellow-700: #ca8a04;
  --color-yellow-900: #7f7100;

  /* ============================================
     FIXED SEMANTIC TOKENS
     Brand / tool-specific — same in all modes
     ============================================ */

  /* Brand orange */
  --orange:       var(--color-orange-500);
  --orange-light: var(--color-orange-100);
  --orange-dark:  var(--color-orange-900);

  /* FAB */
  --fab-green:   var(--color-green-500);;
  --fab-shadow:  0 10px 8.6px 0 rgba(0, 0, 0, 0.07), 0 11.077px 13.785px 0 rgba(255, 255, 255, 0.57) inset;

  /* Focus */
  --focus-ring: rgba(250, 115, 22, 0.5);

  /* Overlays */
  --overlay-backdrop: rgba(0, 0, 0, 0.4);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* FamCal user/event palette — edit here to change calendar event colors */
  --famcal-yehia:    #A4E5FE;
  --famcal-ilse:     #FBA4E5;
  --famcal-adam:     #B2E65E;
  --famcal-sam:      #FDDA4B;
  --famcal-adam-sam: #1CD9B7;
  --famcal-event:    #B792F8;
  --famcal-orange:   #FB9D4B;

  /* Ramadan */
  --ramadan-gold: #D4BC81;

  /* Trip type colors */
  --trip-type-family:    #fff;
  --trip-type-family-bg: var(--famcal-orange);
  --trip-type-couple:    #fff;
  --trip-type-couple-bg: var(--famcal-event);
  --trip-type-yehia:     #fff;
  --trip-type-yehia-bg:  var(--famcal-yehia);
  --trip-type-ilse:      #fff;
  --trip-type-ilse-bg:   var(--famcal-ilse);

  /* Part type colors (travel tool) */
  --part-type-note-text:  var(--gray-700);;
  --part-type-attraction: var(--color-red-900);
  --part-type-restaurant: var(--color-green-900);
  --part-type-food:       var(--color-green-900);
  --part-type-stay:       var(--color-blue-900);
  --part-type-travel:     var(--color-orange-900);
  --part-type-global:     var(--gray-700);
  --part-type-other:      var(--gray-700);

  /* Milestone colors (travel tool) */
  --milestone-color-1: var(--color-orange-300);
  --milestone-color-2: var(--color-purple-300);
  --milestone-color-3: var(--color-blue-300);
  --milestone-color-4: var(--color-green-300);
  --milestone-color-5: var(--color-red-300);
}

/* ============================================
   DARK MODE — Default semantic tokens
   ============================================ */
:root {
  /* App backgrounds */
  --app-bg:       #000000;
  --bg:           var(--neutral-bg);
  --bg-secondary: #0a0a0a;
  --bg-tertiary:  #111111;
  --card-bg:      #0a0a0a;
  --card-bg-hover:#1a1a1a;
  --overlay-bg:   var(--gray-800);
  --toolbar-bg:   var(--gray-800);

  /* Borders & dividers */
  --border:       #222222;
  --border-light: #111111;
  --border-dark:  #333333;
  --divider:      #1a1a1a;
  --divider-light:#111111;
  --divider-dark: #333333;

  /* Header */
  --header-bg:   transparent;
  --header-text: #999999;

  /* Text */
  --text-main:    #ffffff;
  --text-dim:     #666666;
  --text-muted:   #888888;
  --text-subtle:  #cccccc;
  --text-inverse: #000000;

  /* Purple (toolbelt FAB, special event types) */
  --purple:       var(--color-purple-500);
  --purple-hover: var(--color-purple-700);
  --purple-dark:  var(--color-purple-900);

  /* Status — lighter shades for readability on dark backgrounds */
  --status-green:  var(--color-green-300);
  --status-red:    var(--color-red-300);
  --status-blue:   var(--color-blue-300);
  --status-orange: var(--color-orange-300);
  --status-online: var(--color-green-300);

  /* Danger (destructive actions) */
  --danger:       var(--color-red-700);
  --danger-hover: var(--color-red-900);

  /* Action blue (send buttons, subscribe toggles) */
  --action-blue:       var(--color-blue-500);
  --action-blue-hover: var(--color-blue-700);

  /* Toast notifications */
  --toast-success-bg:   var(--color-green-900);
  --toast-success-text: var(--color-green-100);
  --toast-success-icon: var(--color-green-300);
  --toast-warning-bg:   var(--color-orange-900);
  --toast-warning-text: var(--color-orange-100);
  --toast-warning-icon: var(--color-orange-300);
  --toast-error-bg:     var(--color-red-900);
  --toast-error-text:   var(--color-red-100);
  --toast-error-icon:   var(--color-red-300);
  --toast-info-bg:      var(--color-blue-900);
  --toast-info-text:    var(--color-blue-100);
  --toast-info-icon:    var(--color-blue-300);

  /* Health weight chart colors */
  --health-weight-gain:        var(--color-red-300);
  --health-weight-gain-bg:     var(--color-red-900);
  --health-weight-loss:        var(--color-green-300);
  --health-weight-loss-bg:     var(--color-green-900);
  --health-weight-neutral:     var(--color-blue-300);
  --health-weight-neutral-bg:  var(--color-blue-900);

  /* Part type charging (dark mode specific) */
  --part-type-charging-bg:   var(--color-blue-900);
  --part-type-charging-text: var(--color-blue-100);

  /* Neutral palette */
  --neutral-primary:   #FFFFFF;
  --neutral-secondary: #A0A1A8;
  --neutral-tertiary:  var(--gray-400);
  --neutral-bg:        #0E1828;
  --neutral-surface:   #1C2938;
  --neutral-surface2:  rgb(34, 48, 64);
  
}

/* ============================================
   LIGHT MODE — Semantic token overrides
   ============================================ */
[data-theme="light"] {
  /* App backgrounds */
  --app-bg:       #cccccc;
  --bg:           var(--neutral-bg);
  --bg-secondary: #f8f8f8;
  --bg-tertiary:  var(--gray-100);
  --card-bg:      #f8f8f8;
  --card-bg-hover:#f0f0f0;
  --overlay-bg:   #ffffff;
  --toolbar-bg:   var(--gray-100);

  /* Borders & dividers */
  --border:       #e0e0e0;
  --border-light: #f0f0f0;
  --border-dark:  #d0d0d0;
  --divider:      #e5e5e5;
  --divider-light:#f0f0f0;
  --divider-dark: #d0d0d0;

  /* Header */
  --header-text: #666666;

  /* Text */
  --text-main:    #1a1a1a;
  --text-dim:     #666666;
  --text-muted:   #888888;
  --text-subtle:  #999999;
  --text-inverse: #ffffff;

  /* Status — standard shades for readability on light backgrounds */
  --status-green:  var(--color-green-500);
  --status-red:    var(--color-red-500);
  --status-blue:   var(--color-blue-500);
  --status-orange: var(--color-orange-500);
  --status-online: var(--color-green-500);

  /* Action blue */
  --action-blue:       var(--color-blue-700);
  --action-blue-hover: var(--color-blue-900);

  /* Toast notifications */
  --toast-success-bg:   var(--color-green-100);
  --toast-success-text: var(--color-green-700);
  --toast-success-icon: var(--color-green-700);
  --toast-warning-bg:   var(--color-orange-100);
  --toast-warning-text: var(--color-orange-700);
  --toast-warning-icon: var(--color-orange-700);
  --toast-error-bg:     var(--color-red-100);
  --toast-error-text:   var(--color-red-700);
  --toast-error-icon:   var(--color-red-700);
  --toast-info-bg:      var(--color-blue-100);
  --toast-info-text:    var(--color-blue-700);
  --toast-info-icon:    var(--color-blue-700);

  /* Health weight chart colors */
  --health-weight-gain:        var(--color-red-500);
  --health-weight-gain-bg:     var(--color-red-100);
  --health-weight-loss:        var(--color-green-500);
  --health-weight-loss-bg:     var(--color-green-100);
  --health-weight-neutral:     var(--color-blue-500);
  --health-weight-neutral-bg:  var(--color-blue-100);

  /* Part type charging (light mode specific) */
  --part-type-charging-bg:   #E0EFFF;
  --part-type-charging-text: #0064D0;

  /* Neutral palette */
  --neutral-primary:   #000000;
  --neutral-secondary: #666666;
  --neutral-tertiary:  var(--gray-500);
  --neutral-bg:        #f1f5f9;
  --neutral-surface:   #ffffff;
  --neutral-surface2: #e3e9ee;
}

/* Body background */
body {
  background-color: var(--neutral-bg);
  color: var(--neutral-primary);
}

/* ============================================
   Typography scale
   ============================================ */

/* Font-size CSS vars — use these in component CSS to stay on the scale */
:root {
  --fs-xl:  24px; /* .title-xl / .text-xl */
  --fs-l:   20px; /* .title-l  / .text-l  */
  --fs-m:   18px; /* .title-m  / .text-m  */
  --fs-s:   16px; /* .title-s  / .text-s  */
  --fs-xs:  14px; /* .title-xs / .text-xs / .caption-l */
  --fs-xxs: 12px; /* .title-xxs/ .text-xxs/ .caption-m */
  --fs-cap: 10px; /* .caption-s */
}

/* Titles: Inter 700, 150% line-height */
.title-xl  { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.5;  }
.title-l   { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.5;  }
.title-m   { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.5;  }
.title-s   { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5;  }
.title-xs  { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; line-height: 1.5;}
.title-xxs { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; line-height: 1.5;  }

/* Text: Inter 400, 150% line-height */
.text-xl  { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 24px; line-height: 1.5; }
.text-l   { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 20px; line-height: 1.5;  }
.text-m   { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.5;  }
.text-s   { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5;  }
.text-xs  { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5;  }
.text-xxs { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px; line-height: 1.5;  }

/* Captions: Inter 700, all caps, 8% letter-spacing */
.caption-l { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neutral-tertiary); }
.caption-m { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neutral-tertiary); }
.caption-s { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neutral-tertiary); }