/**
 * Material Design 3 Design Tokens
 * Single source of truth for finbrain PWA design system
 * 
 * Usage: Load this FIRST before any component CSS
 * DO NOT add component styles here - only design tokens
 */

:root {
  /* ========================================
     COLOR SYSTEM
     ======================================== */
  
  /* Primary Palette */
  --sys-primary: #0A68FF;
  --sys-on-primary: #FFFFFF;
  --sys-primary-container: #D3E3FD;
  --sys-on-primary-container: #001B3F;
  
  /* Success Palette */
  --sys-success: #1E8E3E;
  --sys-success-container: #C4EED0;
  --sys-on-success-container: #0A3818;
  
  /* Error Palette */
  --sys-error: #BA1A1A;
  --sys-error-container: #FFDAD6;
  --sys-on-error-container: #410002;
  
  /* Warning Palette (optional) */
  --sys-warning: #F9AB00;
  --sys-warning-container: #FFF8E1;
  --sys-on-warning-container: #E65100;
  
  /* Surface & Background */
  --sys-surface: #FFFFFF;
  --sys-surface-bright: #FFFFFF;
  --sys-surface-container: #F3F4F6;
  --sys-surface-container-high: #EAECF0;
  --sys-surface-container-highest: #E1E3E6;
  --sys-on-surface: #1A1C1E;
  --sys-on-surface-variant: #44474E;
  
  /* Outline */
  --sys-outline: #E8EAED;
  --sys-outline-variant: #C4C7C5;
  
  /* Z-Index Hierarchy (sheets/modals must be above bottom nav) */
  --z-bottom-nav: 2000;
  --z-sheet: 2100;
  --z-toast: 2500;
  
  /* Category Colors */
  --cat-food: #34A853;              /* Google Green */
  --cat-transport: #4285F4;         /* Google Blue */
  --cat-bills: #FBBC04;             /* Google Yellow */
  --cat-shopping: #F29900;          /* Amber */
  --cat-entertainment: #E91E63;     /* Pink - distinct from blue */
  --cat-health: #00ACC1;            /* Teal */
  --cat-education: #7C4DFF;         /* Deep Purple */
  --cat-essentials: #4ECDC4;        /* Turquoise - household essentials */
  --cat-other: #5F6368;             /* Google Gray */
  --cat-uncategorized: var(--cat-other); /* Alias - always display as Other */
  
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  /* Font Family */
  --font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Type Scale (MD3) */
  --type-display-large: 57px;
  --type-display-medium: 45px;
  --type-display-small: 36px;
  
  --type-headline-large: 32px;
  --type-headline-medium: 28px;
  --type-headline-small: 24px;
  
  --type-title-large: 22px;
  --type-title-medium: 16px;
  --type-title-small: 14px;
  
  --type-body-large: 16px;
  --type-body-medium: 14px;
  --type-body-small: 12px;
  
  --type-label-large: 14px;
  --type-label-medium: 12px;
  --type-label-small: 11px;
  
  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  
  /* ========================================
     ELEVATION (SHADOWS)
     ======================================== */
  
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 3px 0 rgba(60, 64, 67, 0.15), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --shadow-3: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3);
  
  
  /* ========================================
     SHAPE (BORDER RADIUS)
     ======================================== */
  
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
  
  
  /* ========================================
     SPACING (8DP GRID)
     ======================================== */
  
  --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;
  
  
  /* ========================================
     MOTION (EASING & DURATION)
     ======================================== */
  
  /* Easing Curves */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --ease-emphasized: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Duration */
  --duration-short-1: 50ms;
  --duration-short-2: 100ms;
  --duration-short-3: 150ms;
  --duration-short-4: 200ms;
  --duration-medium-1: 250ms;
  --duration-medium-2: 300ms;
  --duration-long-1: 400ms;
  --duration-long-2: 500ms;
  
  
  /* ========================================
     COMPONENT TOKENS
     ======================================== */
  
  /* Icon Sizing */
  --icon-size-sm: 20px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  
  /* Touch Targets */
  --touch-target-min: 48px;
  
  /* State Layers (Hover/Press Opacity) */
  --state-hover-opacity: 0.08;
  --state-press-opacity: 0.12;
  --state-focus-opacity: 0.12;
  
  /* Focus Ring */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--sys-primary);
}

/* ========================================
   BASE STYLES
   ======================================== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--type-body-large);
  line-height: 1.6;
  color: var(--sys-on-surface);
  background-color: var(--sys-surface-bright);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ========================================
   CATEGORY STYLE RECIPE
   Single source of truth for category styling.
   Usage: Add .cat-{key} class to set --cat-color,
   then use utility classes for consistent styling.
   ======================================== */

/* Category classes: Set --cat-color from canonical tokens */
.cat-food { --cat-color: var(--cat-food); }
.cat-transport { --cat-color: var(--cat-transport); }
.cat-bills { --cat-color: var(--cat-bills); }
.cat-shopping { --cat-color: var(--cat-shopping); }
.cat-entertainment { --cat-color: var(--cat-entertainment); }
.cat-health { --cat-color: var(--cat-health); }
.cat-education { --cat-color: var(--cat-education); }
.cat-essentials { --cat-color: var(--cat-essentials); }
.cat-other { --cat-color: var(--cat-other); }
.cat-uncategorized { --cat-color: var(--cat-other); }

/* Utility: Icon color derived from --cat-color */
.category-icon {
  color: var(--cat-color);
}

/* Utility: Tonal icon background (12% opacity of category color) */
/* Fallback backgrounds for browsers without color-mix() support */
.cat-food.category-icon-bg { background: rgba(52, 168, 83, 0.12); }
.cat-transport.category-icon-bg { background: rgba(66, 133, 244, 0.12); }
.cat-bills.category-icon-bg { background: rgba(251, 188, 4, 0.12); }
.cat-shopping.category-icon-bg { background: rgba(242, 153, 0, 0.12); }
.cat-entertainment.category-icon-bg { background: rgba(233, 30, 99, 0.12); }
.cat-health.category-icon-bg { background: rgba(0, 172, 193, 0.12); }
.cat-education.category-icon-bg { background: rgba(124, 77, 255, 0.12); }
.cat-essentials.category-icon-bg { background: rgba(78, 205, 196, 0.12); }
.cat-other.category-icon-bg { background: rgba(95, 99, 104, 0.12); }
.cat-uncategorized.category-icon-bg { background: rgba(95, 99, 104, 0.12); }

/* Modern browsers: use color-mix() for dynamic theming (matching specificity) */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .cat-food.category-icon-bg,
  .cat-transport.category-icon-bg,
  .cat-bills.category-icon-bg,
  .cat-shopping.category-icon-bg,
  .cat-entertainment.category-icon-bg,
  .cat-health.category-icon-bg,
  .cat-education.category-icon-bg,
  .cat-essentials.category-icon-bg,
  .cat-other.category-icon-bg,
  .cat-uncategorized.category-icon-bg,
  .category-icon-bg {
    background: color-mix(in srgb, var(--cat-color) 12%, transparent);
  }
}

/* Utility: Tinted surface (10% bg, 30% border) for selectable items */
/* Fallback for browsers without color-mix() */
.cat-food.category-tinted-surface { background: rgba(52, 168, 83, 0.10); border-color: rgba(52, 168, 83, 0.30); }
.cat-transport.category-tinted-surface { background: rgba(66, 133, 244, 0.10); border-color: rgba(66, 133, 244, 0.30); }
.cat-bills.category-tinted-surface { background: rgba(251, 188, 4, 0.10); border-color: rgba(251, 188, 4, 0.30); }
.cat-shopping.category-tinted-surface { background: rgba(242, 153, 0, 0.10); border-color: rgba(242, 153, 0, 0.30); }
.cat-entertainment.category-tinted-surface { background: rgba(233, 30, 99, 0.10); border-color: rgba(233, 30, 99, 0.30); }
.cat-health.category-tinted-surface { background: rgba(0, 172, 193, 0.10); border-color: rgba(0, 172, 193, 0.30); }
.cat-education.category-tinted-surface { background: rgba(124, 77, 255, 0.10); border-color: rgba(124, 77, 255, 0.30); }
.cat-essentials.category-tinted-surface { background: rgba(78, 205, 196, 0.10); border-color: rgba(78, 205, 196, 0.30); }
.cat-other.category-tinted-surface { background: rgba(95, 99, 104, 0.10); border-color: rgba(95, 99, 104, 0.30); }
.cat-uncategorized.category-tinted-surface { background: rgba(95, 99, 104, 0.10); border-color: rgba(95, 99, 104, 0.30); }

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .cat-food.category-tinted-surface,
  .cat-transport.category-tinted-surface,
  .cat-bills.category-tinted-surface,
  .cat-shopping.category-tinted-surface,
  .cat-entertainment.category-tinted-surface,
  .cat-health.category-tinted-surface,
  .cat-education.category-tinted-surface,
  .cat-essentials.category-tinted-surface,
  .cat-other.category-tinted-surface,
  .cat-uncategorized.category-tinted-surface,
  .category-tinted-surface {
    background: color-mix(in srgb, var(--cat-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--cat-color) 30%, transparent);
  }
}

/* Utility: Selected state for category buttons (24% bg, category-tinted border) */
/* Fallback for browsers without color-mix() */
.cat-food.category-selected { background: rgba(52, 168, 83, 0.24); }
.cat-transport.category-selected { background: rgba(66, 133, 244, 0.24); }
.cat-bills.category-selected { background: rgba(251, 188, 4, 0.24); }
.cat-shopping.category-selected { background: rgba(242, 153, 0, 0.24); }
.cat-entertainment.category-selected { background: rgba(233, 30, 99, 0.24); }
.cat-health.category-selected { background: rgba(0, 172, 193, 0.24); }
.cat-education.category-selected { background: rgba(124, 77, 255, 0.24); }
.cat-essentials.category-selected { background: rgba(78, 205, 196, 0.24); }
.cat-other.category-selected { background: rgba(95, 99, 104, 0.24); }
.cat-uncategorized.category-selected { background: rgba(95, 99, 104, 0.24); }

.category-selected {
  border-color: var(--cat-color);
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .cat-food.category-selected,
  .cat-transport.category-selected,
  .cat-bills.category-selected,
  .cat-shopping.category-selected,
  .cat-entertainment.category-selected,
  .cat-health.category-selected,
  .cat-education.category-selected,
  .cat-essentials.category-selected,
  .cat-other.category-selected,
  .cat-uncategorized.category-selected,
  .category-selected {
    background: color-mix(in srgb, var(--cat-color) 24%, transparent);
  }
}

/* Utility: Icon wrapper with tonal background (12-14% opacity) */
.category-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Fallback backgrounds for category-icon-wrap */
.cat-food .category-icon-wrap, .cat-food.category-icon-wrap { background: rgba(52, 168, 83, 0.14); }
.cat-transport .category-icon-wrap, .cat-transport.category-icon-wrap { background: rgba(66, 133, 244, 0.14); }
.cat-bills .category-icon-wrap, .cat-bills.category-icon-wrap { background: rgba(251, 188, 4, 0.14); }
.cat-shopping .category-icon-wrap, .cat-shopping.category-icon-wrap { background: rgba(242, 153, 0, 0.14); }
.cat-entertainment .category-icon-wrap, .cat-entertainment.category-icon-wrap { background: rgba(233, 30, 99, 0.14); }
.cat-health .category-icon-wrap, .cat-health.category-icon-wrap { background: rgba(0, 172, 193, 0.14); }
.cat-education .category-icon-wrap, .cat-education.category-icon-wrap { background: rgba(124, 77, 255, 0.14); }
.cat-essentials .category-icon-wrap, .cat-essentials.category-icon-wrap { background: rgba(78, 205, 196, 0.14); }
.cat-other .category-icon-wrap, .cat-other.category-icon-wrap { background: rgba(95, 99, 104, 0.14); }

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .cat-food .category-icon-wrap, .cat-food.category-icon-wrap,
  .cat-transport .category-icon-wrap, .cat-transport.category-icon-wrap,
  .cat-bills .category-icon-wrap, .cat-bills.category-icon-wrap,
  .cat-shopping .category-icon-wrap, .cat-shopping.category-icon-wrap,
  .cat-entertainment .category-icon-wrap, .cat-entertainment.category-icon-wrap,
  .cat-health .category-icon-wrap, .cat-health.category-icon-wrap,
  .cat-education .category-icon-wrap, .cat-education.category-icon-wrap,
  .cat-essentials .category-icon-wrap, .cat-essentials.category-icon-wrap,
  .cat-other .category-icon-wrap, .cat-other.category-icon-wrap,
  .category-icon-wrap {
    background: color-mix(in srgb, var(--cat-color) 14%, transparent);
  }
}

/* Smaller icon wrapper for autocomplete items */
.category-icon-wrap-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Fallback backgrounds for category-icon-wrap-sm */
.cat-food.category-icon-wrap-sm { background: rgba(52, 168, 83, 0.14); }
.cat-transport.category-icon-wrap-sm { background: rgba(66, 133, 244, 0.14); }
.cat-bills.category-icon-wrap-sm { background: rgba(251, 188, 4, 0.14); }
.cat-shopping.category-icon-wrap-sm { background: rgba(242, 153, 0, 0.14); }
.cat-entertainment.category-icon-wrap-sm { background: rgba(233, 30, 99, 0.14); }
.cat-health.category-icon-wrap-sm { background: rgba(0, 172, 193, 0.14); }
.cat-education.category-icon-wrap-sm { background: rgba(124, 77, 255, 0.14); }
.cat-essentials.category-icon-wrap-sm { background: rgba(78, 205, 196, 0.14); }
.cat-other.category-icon-wrap-sm { background: rgba(95, 99, 104, 0.14); }

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .category-icon-wrap-sm {
    background: color-mix(in srgb, var(--cat-color) 14%, transparent);
  }
}

/* Chat: Edit badge styling (replaces inline hex colors) */
.chat-edit-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--sys-primary) 12%, transparent);
  color: var(--sys-primary);
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-left: 6px;
}

/* Chat: Category chip filled styling (uses --cat-color from .cat-{key} class) */
.category-chip-filled {
  background: var(--cat-color, var(--sys-primary));
  color: white;
}

.category-chip-filled .chip-icon,
.category-chip-filled .icon-filled {
  color: white;
}

.category-chip-filled .chip-label {
  font-weight: 500;
  font-size: 14px;
}

/* Font weight utility */
.font-semibold {
  font-weight: 600;
}