/* CSS Variables for Dark Theme Only */
:root {
  /* Dark Mode Colors */
  --bg-primary: rgba(28, 28, 30, 0.66);
  --bg-secondary: rgba(28, 28, 30, 0.50);
  --bg-tertiary: rgba(28, 28, 30, 0.24);
  --bg-overlay: rgba(28, 28, 30, 0.88);
  --text-primary: rgba(255, 255, 255, 0.86);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.38);
  --text-strong: rgba(255, 255, 255, 0.88);
  --placeholder: rgba(255, 255, 255, 0.56);
  --accent-primary: rgba(0, 122, 255, 1);
  --accent-secondary: rgba(0, 122, 255, 0.8);
  --border-color: rgba(255, 255, 255, 0.28);
  --shadow-light: rgba(255, 255, 255, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.3);
  --backdrop-blur: 24px;
  --gradient-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.08));

  /* Reusable glass surfaces */
  --glass-bg: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  --glass-bg-hover: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  --glass-border: rgba(255,255,255,0.14);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.18);
  --glass-shadow: 0 2px 7px rgba(0,0,0,0.06);

  /* Accent-tinted glass (used for active states/New Note) */
  --accent-glass-bg: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent-primary) 26%, rgba(255,255,255,0.18)),
    color-mix(in oklab, var(--accent-primary) 18%, rgba(255,255,255,0.06))
  );
  --accent-glass-bg-hover: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent-primary) 36%, rgba(255,255,255,0.22)),
    color-mix(in oklab, var(--accent-primary) 24%, rgba(255,255,255,0.10))
  );
  --accent-glass-border: color-mix(in oklab, var(--accent-primary) 45%, rgba(255,255,255,0.28));
  --accent-glass-inset: inset 0 1px 0 rgba(255,255,255,0.28);
  --accent-glass-shadow: 0 3px 10px rgba(0,0,0,0.12);

  /* Semantic colors */
  --success-green: #22c55e;
}