/* ══════════════════════════════════════
   Design Tokens — 比爛
   Dark-first, red/gold accent
   ══════════════════════════════════════ */

/* 遠端 Mac / 無 PingFang 的環境（如 MacinCloud）也能顯示中文 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Accent ── */
  --accent:        #e63946;
  --accent-soft:   rgba(230, 57, 70, 0.15);
  --accent-hover:  #c1121f;
  --crown:         #f4c430;
  --crown-soft:    rgba(244, 196, 48, 0.12);
  --sympathy:      #60a5fa;
  --sympathy-soft: rgba(96, 165, 250, 0.12);

  /* ── Category Colors ── */
  --cat-study:    #7c3aed;
  --cat-life:     #0ea5e9;
  --cat-love:     #ec4899;
  --cat-work:     #f59e0b;
  --cat-health:   #10b981;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* ── Border Radius ── */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-base: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* ── Layout ── */
  --nav-height: 76px;
  --header-height: 60px;
  --safe-top: calc(env(safe-area-inset-top, 0px) + var(--app-inset-top, 0px));
  --safe-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--app-inset-bottom, 0px));
  --app-inset-top: 0px;
  --app-inset-bottom: 0px; /* set by JS in WebView app */
}

/* iOS Capacitor 殼：Safe Area 只信系統 env，避免與 visualViewport 雙重計算 */
html.in-app-ios {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-inset-top: 0px;
  --app-inset-bottom: 0px;
}

/* ════════ DARK THEME (default) ════════ */
[data-theme="dark"] {
  --bg-base:       #0d0d0d;
  --bg-surface:    #171717;
  --bg-card:       #1e1e1e;
  --bg-elevated:   #2a2a2a;
  --bg-input:      #262626;

  --border:        #2e2e2e;
  --border-soft:   #222222;

  --text-primary:  #f5f5f5;
  --text-secondary:#a3a3a3;
  --text-tertiary: #525252;
  --text-on-accent:#ffffff;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);

  --nav-bg: rgba(17, 17, 17, 0.92);
  --overlay-bg: rgba(0, 0, 0, 0.75);
}

/* ════════ LIGHT THEME ════════ */
[data-theme="light"] {
  --bg-base:       #f2f2f2;
  --bg-surface:    #fafafa;
  --bg-card:       #ffffff;
  --bg-elevated:   #f7f7f7;
  --bg-input:      #f5f5f5;

  --border:        #e5e5e5;
  --border-soft:   #eeeeee;

  --text-primary:  #111111;
  --text-secondary:#6b6b6b;
  --text-tertiary: #b5b5b5;
  --text-on-accent:#ffffff;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  --nav-bg: rgba(255, 255, 255, 0.92);
  --overlay-bg: rgba(0, 0, 0, 0.55);
}