/* ============================================================
   Mao AI Companion — Design Token System
   Warm Diary + AI-Native dual theme (Light / Dark)
   Shared across all pages
   ============================================================ */

/* ---- Font Stack ---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans GB", sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Fira Code", monospace;

  /* ---- Spacing Scale (4dp rhythm) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(61, 44, 30, 0.04);
  --shadow-sm: 0 1px 3px rgba(61, 44, 30, 0.08);
  --shadow-md: 0 4px 12px rgba(61, 44, 30, 0.10);
  --shadow-lg: 0 8px 24px rgba(61, 44, 30, 0.12);
  --shadow-xl: 0 16px 48px rgba(61, 44, 30, 0.14);
  --shadow-glow-coral: 0 0 20px rgba(212, 116, 92, 0.15);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  /* ---- Z-Index Scale ---- */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
}

/* ===================== LIGHT THEME (Navy + Cream) ===================== */
:root,
[data-theme="light"] {
  /* ══════ Brand Colors — Mao Identity System ══════
     Primary: Navy #1A2C54  |  Accent: Warm Orange #FF9F55
     Secondary: Light Blue #69B1FF  |  Purple #B388EB  */
  --color-brand-navy: #1A2C54;
  --color-brand-orange: #FF9F55;
  --color-brand-blue: #69B1FF;
  --color-brand-purple: #B388EB;

  --color-primary: #1A2C54;
  --color-primary-hover: #253D6E;
  --color-primary-light: #D0D8E8;
  --color-primary-surface: #F2F4F8;
  --color-primary-glow: rgba(26, 44, 84, 0.12);

  --color-secondary: #69B1FF;
  --color-secondary-dark: #5098E8;
  --color-secondary-light: #D6ECFF;
  --color-secondary-surface: #F5FAFF;

  --color-accent: #FF9F55;
  --color-accent-hover: #F0883D;
  --color-accent-light: #FFE8D6;
  --color-accent-surface: #FFF6F0;

  --color-purple: #B388EB;
  --color-purple-light: #EDE0FB;
  --color-purple-surface: #F9F5FF;

  /* Surfaces (warm cream hierarchy) */
  --color-bg: #FBF7F0;
  --color-bg-alt: #F5F0E8;
  --color-surface: #FFFCF8;
  --color-surface-hover: #F8F3EB;
  --color-surface-elevated: #FFFFFF;
  --color-surface-dim: #E8DDD0;

  /* Text (warm ink hierarchy) */
  --color-text-primary: #3D2C1E;
  --color-text-secondary: #8A7A6A;
  --color-text-tertiary: #B5A898;
  --color-text-inverse: #FFFCF8;
  --color-text-link: #D4745C;

  /* Borders & Dividers */
  --color-border: #E8DDD0;
  --color-border-light: #F0EAE0;
  --color-divider: rgba(232, 221, 208, 0.6);

  /* Status Colors */
  --color-success: #6DAA6D;
  --color-success-bg: #F4F8F5;
  --color-warning: #C49B5E;
  --color-warning-bg: #FDF6E5;
  --color-error: #D4745C;
  --color-error-bg: #FDF6F2;
  --color-info: #6B9BC4;
  --color-info-bg: #F2F6FA;

  /* Gradient Presets — Brand */
  --gradient-warm: linear-gradient(135deg, #FF9F55, #F0883D);
  --gradient-brand: linear-gradient(135deg, #1A2C54, #2D4A7A);
  --gradient-sunset: linear-gradient(135deg, #FF9F55, #B388EB);
  --gradient-calm: linear-gradient(135deg, #69B1FF, #5098E8);
  --gradient-bg: linear-gradient(180deg, #F5FAFF 0%, #FBF7F0 62%, #FFFCF8 100%);
  --gradient-surface: linear-gradient(180deg, #FFFFFF, #F8F6F2);

  /* Overlay / Scrim */
  --color-overlay: rgba(61, 44, 30, 0.35);
  --color-overlay-light: rgba(61, 44, 30, 0.08);

  /* Glass Effect (light) */
  --glass-bg: rgba(255, 252, 248, 0.82);
  --glass-border: rgba(232, 221, 208, 0.7);
  --glass-blur: 12px;
  --glass-bg-strong: rgba(255, 252, 248, 0.92);
  --glass-shadow: 0 8px 32px rgba(61, 44, 30, 0.06);

  /* Mood / Emotion Palette (light) */
  --mood-happy-bg: linear-gradient(135deg, #FFF8E8, #FFE8CC, #FFF5F0);
  --mood-happy-accent: #FFB347;
  --mood-calm-bg: linear-gradient(135deg, #F5F0EC, #E8EFE5, #FDF9F6);
  --mood-calm-accent: #8AAE92;
  --mood-sad-bg: linear-gradient(135deg, #EDF2F8, #DCE4F0, #F6F8FB);
  --mood-sad-accent: #7BA3C9;
  --mood-excited-bg: linear-gradient(135deg, #FFF0E0, #FFD4B8, #FFECE0);
  --mood-excited-accent: #FF8C42;
  --mood-angry-bg: linear-gradient(135deg, #FBE9E7, #F5D5CF, #FFF5F3);
  --mood-angry-accent: #E57373;

  /* Chat Bubble */
  --bubble-ai-bg: var(--color-surface-elevated);
  --bubble-ai-shadow: var(--shadow-sm);
  --bubble-user-bg: var(--gradient-brand);
  --bubble-user-shadow: 0 4px 12px rgba(26, 44, 84, 0.25);

  /* Sidebar Navigation */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --sidebar-bg: var(--color-surface);
  --sidebar-item-hover: var(--color-surface-hover);
  --sidebar-item-active-bg: var(--color-primary-surface);
  --sidebar-item-active-color: var(--color-primary);

  /* Scrollbar */
  --scrollbar-thumb: #D4C4B5;
  --scrollbar-track: transparent;
}

/* ===================== DARK THEME (Navy Night) ===================== */
[data-theme="dark"] {
  /* Brand Colors (adjusted for dark) */
  --color-brand-navy: #4A6DA8;
  --color-brand-orange: #FFB573;
  --color-brand-blue: #8CC8FF;
  --color-brand-purple: #C9A8F0;

  --color-primary: #8BB0E0;
  --color-primary-hover: #A0C0EC;
  --color-primary-light: #1A2C3E;
  --color-primary-surface: #141E2E;
  --color-primary-glow: rgba(139, 176, 224, 0.15);

  --color-secondary: #8CC8FF;
  --color-secondary-dark: #6AB0F0;
  --color-secondary-light: #1A2838;
  --color-secondary-surface: #141E28;

  --color-accent: #FFB573;
  --color-accent-hover: #FFC48F;
  --color-accent-light: #3D2820;
  --color-accent-surface: #2A1E18;

  --color-purple: #C9A8F0;
  --color-purple-light: #2A2438;
  --color-purple-surface: #1E1A28;

  /* Surfaces (warm dark hierarchy) */
  --color-bg: #1A1614;
  --color-bg-alt: #1F1B18;
  --color-surface: #26211E;
  --color-surface-hover: #2E2824;
  --color-surface-elevated: #302925;
  --color-surface-dim: #201B18;

  /* Text (warm light hierarchy on dark) */
  --color-text-primary: #F0EBE3;
  --color-text-secondary: #B0A699;
  --color-text-tertiary: #7A7066;
  --color-text-inverse: #1A1614;
  --color-text-link: #FF9F55;

  /* Borders & Dividers */
  --color-border: #3D352E;
  --color-border-light: #332D27;
  --color-divider: rgba(61, 53, 46, 0.6);

  /* Status Colors */
  --color-success: #7ABD7A;
  --color-success-bg: #1A241C;
  --color-warning: #D4AA6E;
  --color-warning-bg: #2A2218;
  --color-error: #E8957A;
  --color-error-bg: #2A1A16;
  --color-info: #7BA8D0;
  --color-info-bg: #181F2A;

  /* Gradient Presets — Brand */
  --gradient-warm: linear-gradient(135deg, #FFB573, #E8985D);
  --gradient-brand: linear-gradient(135deg, #4A6DA8, #6088C0);
  --gradient-sunset: linear-gradient(135deg, #FFB573, #C9A8F0);
  --gradient-calm: linear-gradient(135deg, #8CC8FF, #6AB0F0);
  --gradient-bg: linear-gradient(180deg, #1A1E28 0%, #1A1614 62%, #201B18 100%);
  --gradient-surface: linear-gradient(180deg, #26211E, #1F1B18);

  /* Overlay / Scrim */
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-overlay-light: rgba(255, 255, 255, 0.05);

  /* Glass Effect (dark) */
  --glass-bg: rgba(38, 33, 30, 0.78);
  --glass-border: rgba(61, 53, 46, 0.7);
  --glass-blur: 14px;
  --glass-bg-strong: rgba(38, 33, 30, 0.9);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

  /* Mood / Emotion Palette (dark) */
  --mood-happy-bg: linear-gradient(135deg, #3D3020, #2A2418, #2E2620);
  --mood-happy-accent: #FFB573;
  --mood-calm-bg: linear-gradient(135deg, #1A2838, #141E28, #202630);
  --mood-calm-accent: #8CC8FF;
  --mood-sad-bg: linear-gradient(135deg, #1E2630, #1A222C, #20262E);
  --mood-sad-accent: #8BB8D8;
  --mood-excited-bg: linear-gradient(135deg, #3A2820, #2E201A, #32241E);
  --mood-excited-accent: #FFA066;
  --mood-angry-bg: linear-gradient(135deg, #3A2020, #2E1A1A, #321E1E);
  --mood-angry-accent: #F08080;

  /* Chat Bubble */
  --bubble-ai-bg: var(--color-surface-elevated);
  --bubble-ai-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --bubble-user-bg: var(--gradient-brand);
  --bubble-user-shadow: 0 4px 16px rgba(139, 176, 224, 0.2);

  /* Sidebar Navigation */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --sidebar-bg: var(--color-surface);
  --sidebar-item-hover: var(--color-surface-hover);
  --sidebar-item-active-bg: var(--color-primary-surface);
  --sidebar-item-active-color: var(--color-primary);

  /* Scrollbar */
  --scrollbar-thumb: #4A423B;
  --scrollbar-track: transparent;

  /* Native dark scheme */
  color-scheme: dark;
}

/* ===================== BASE STYLES ===================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* Focus ring (accessible) */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus:not(:focus-visible) {
  outline: none;
}

/* Selection */
::selection {
  background: var(--color-primary-light);
  color: var(--color-text-primary);
}

/* ===================== UTILITY CLASSES ===================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===================== ANIMATIONS ===================== */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes breathing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}