/* ========== CSS CUSTOM PROPERTIES ========== */
:root {
  /* Primary - Teal/Green from Minimals */
  --primary-lighter: #C8FAD6;
  --primary-light: #5BE49B;
  --primary: #00A76F;
  --primary-dark: #007867;
  --primary-darker: #004B50;

  /* Grey Scale */
  --grey-100: #F9FAFB;
  --grey-200: #F4F6F8;
  --grey-300: #DFE3E8;
  --grey-400: #C4CDD5;
  --grey-500: #919EAB;
  --grey-600: #637381;
  --grey-700: #454F5B;
  --grey-800: #1C252E;
  --grey-900: #141A21;

  /* Semantic Colors */
  --info: #00B8D9;
  --success: #22C55E;
  --warning: #FFAB00;
  --error: #FF5630;

  /* Light Theme */
  --bg-paper: #FFFFFF;
  --bg-default: #F9FAFB;
  --bg-neutral: #F4F6F8;
  --text-primary: #1C252E;
  --text-secondary: #637381;
  --text-disabled: #919EAB;
  --divider: rgba(145, 158, 171, 0.2);

  /* Shadows */
  --shadow-card: 0 0 2px 0 rgba(145,158,171,0.2), 0 12px 24px -4px rgba(145,158,171,0.12);
  --shadow-dropdown: 0 0 2px 0 rgba(145,158,171,0.24), -20px 20px 40px -4px rgba(145,158,171,0.24);
  --shadow-dialog: -40px 40px 80px -8px rgba(145,158,171,0.24);
  --shadow-z1: 0 1px 2px 0 rgba(145,158,171,0.16);
  --shadow-z8: 0 8px 16px 0 rgba(145,158,171,0.16);
  --shadow-z16: 0 16px 32px -4px rgba(145,158,171,0.16);
  --shadow-z20: 0 20px 40px -4px rgba(145,158,171,0.16);
  --shadow-primary: 0 8px 16px 0 rgba(0,167,111,0.24);

  /* Layout */
  --nav-width: 320px;
  --header-height: 72px;
  --radius: 8px;
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --viewport-bottom-inset: 0px;
}

/* ========== DARK THEME ========== */
[data-theme="dark"] {
  --bg-paper: #1C252E;
  --bg-default: #141A21;
  --bg-neutral: #28323D;
  --text-primary: #FFFFFF;
  --text-secondary: #919EAB;
  --text-disabled: #637381;
  --divider: rgba(145, 158, 171, 0.24);
  --shadow-card: 0 0 2px 0 rgba(0,0,0,0.2), 0 12px 24px -4px rgba(0,0,0,0.12);
  --shadow-dropdown: 0 0 2px 0 rgba(0,0,0,0.24), -20px 20px 40px -4px rgba(0,0,0,0.24);
}