/* styles/theme.css */

/* 引入 Google Font: Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* 应用基础字体和过渡效果 */
body {
    font-family: 'Inter', sans-serif;
}

body, aside, main, div, button, a, input {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease-in-out;
}

/* 定义 CSS 颜色变量 - Apple 风格，薰衣草渐变强调 */
:root {
    --color-bg-primary: #f8fafc;      /* slate-50 */
    --color-bg-secondary: #f1f5f9;     /* NEW: slate-100 (卡片背景) */
    /* 不再需要特定背景强调色，除非特殊元素 */
    /* --color-bg-accent-violet: ... */
    /* --color-bg-accent-emerald: ... */
    /* --color-bg-accent-sky: ... */
    --color-text-primary: #1e293b;     /* slate-800 */
    --color-text-secondary: #475569;   /* slate-600 (加深，原 slate-500) */
    --color-text-tertiary: #64748b;    /* slate-500 (加深，原 slate-400) */
    --color-text-accent: #a78bfa;      /* NEW: violet-400 (用于链接等纯色强调) */
    /* 定义渐变色 */
    --color-accent-gradient-start: #c4b5fd; /* violet-300 */
    --color-accent-gradient-end: #8b5cf6;   /* NEW: violet-500 (原 violet-400) */
    
    --color-border-primary: #e2e8f0; /* NEW: Restore subtle border color (slate-200) */
    /* 不再需要特定边框强调色 */
    /* --color-border-accent-violet: ... */
    /* --color-border-accent-emerald: ... */
    /* --color-border-accent-sky: ... */
    
    --color-accent-primary: var(--color-text-accent); /* NEW: Use text-accent for buttons/nav */
    --color-accent-secondary: #34d399;    /* emerald-400 (保留用于 success) */
    --color-accent-info: var(--color-accent-primary); /* Fallback */
    --color-accent-primary-hover: #8b5cf6; /* NEW: violet-500 */
    --color-accent-secondary-hover: theme('colors.teal.600');
    --color-text-on-accent: #ffffff;      /* white */
    --color-text-on-secondary-accent: #065f46; /* emerald-800 */
    --color-text-on-info-accent: var(--color-text-on-accent);
    /* --color-success: theme('colors.emerald.600'); */ /* Removed - Define in tailwind.config */
    --color-shadow: rgba(0, 0, 0, 0.05); /* NEW: Very subtle shadow */
    --gradient-accent-start: theme('colors.violet.400');
}

/* 自定义主题化阴影类 - 改为更微妙的阴影 */
.shadow-themed {
    /* Simulating something like shadow-sm with variable color */
    box-shadow: 0 1px 2px 0 var(--color-shadow);
}
/* 可以添加一个悬停时稍微增强的阴影 */
.shadow-themed-hover:hover {
     box-shadow: 0 1px 3px 0 var(--color-shadow), 0 1px 2px -1px var(--color-shadow); /* shadow-md like */
}

/* 文字渐变效果 */
.text-gradient-accent {
  background: linear-gradient(90deg, var(--color-accent-gradient-start), var(--color-accent-gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  /* Use text-fill-color for WebKit browsers */
  -webkit-text-fill-color: transparent;
   /* Fallback for browsers that don't support background-clip: text */
   /* Set a solid color as fallback */
   color: var(--color-accent-primary);
   /* Ensure display is appropriate for background-clip to work reliably */
   display: inline-block; /* Or block, depending on context */
}

/* 删除卡片渐变边框/辉光效果 */
/*
.card-gradient-border { 
    ...
}
.card-gradient-border::before { 
    ...
}
.card-gradient-border:hover::before {
    ...
}
*/

/* Helper classes for Card Flip Animation */
.perspective {
  perspective: 1000px;
}
.preserve-3d {
  transform-style: preserve-3d;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}
.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
}
/* Class added by JS to trigger the flip */
.is-flipped {
  transform: rotateY(180deg);
}

/* Restore custom styles for selected list item in activity page */
.list-item-selected .transaction-description {
  color: var(--color-accent-primary);
  font-weight: 600; /* Corresponds to font-semibold */
}

/* Ensure base list item hover is subtle if needed */
/* Example: #transaction-list li:hover { background-color: rgba(var(--color--...), 0.03); } */

/* Add any additional global styles or overrides here */

/* Hide mobile nav on login page */
#login-page-body #mobile-bottom-nav {
    display: none;
}

/* Card hover effect for gradient border */
.card-gradient-border {
    position: relative;
    overflow: hidden; /* Ensures pseudo-element stays within bounds */
}