/* ============================================
   Note Chord SoulCiety — CSS Theme Variables
   Dark (default) / Light mode
   ============================================ */

:root {
  /* ===== Dark Theme (default) ===== */
  --bg-primary:    #0d1117;
  --bg-secondary:  #161b22;
  --bg-tertiary:   #21262d;
  --bg-card:       #1c2333;
  --bg-card-hover: #242d3d;
  --bg-overlay:    rgba(0, 0, 0, 0.85);
  --bg-input:      #0d1117;

  --border-primary:   #30363d;
  --border-secondary: #21262d;

  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-muted:     #484f58;
  --text-inverse:   #0d1117;

  --accent:         #58a6ff;
  --accent-hover:   #79c0ff;
  --accent-bg:      rgba(88, 166, 255, 0.1);

  --success:        #3fb950;
  --success-bg:     rgba(63, 185, 80, 0.1);
  --danger:         #f85149;
  --danger-bg:      rgba(248, 81, 73, 0.1);
  --warning:        #d29922;
  --warning-bg:     rgba(210, 153, 34, 0.1);

  --gold:           #f0c75e;
  --silver:         #a8b2c1;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 12px 48px rgba(0, 0, 0, 0.6);

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  --sidebar-width: 260px;
  --topbar-height: 56px;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Thai', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* ===== Light Theme ===== */
[data-theme="light"] {
  --bg-primary:    #f6f8fa;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #f0f3f6;
  --bg-card:       #ffffff;
  --bg-card-hover: #f6f8fa;
  --bg-overlay:    rgba(255, 255, 255, 0.92);
  --bg-input:      #ffffff;

  --border-primary:   #d0d7de;
  --border-secondary: #e1e4e8;

  --text-primary:   #24292f;
  --text-secondary: #57606a;
  --text-muted:     #8b949e;
  --text-inverse:   #ffffff;

  --accent:         #0969da;
  --accent-hover:   #0550ae;
  --accent-bg:      rgba(9, 105, 218, 0.08);

  --success:        #1a7f37;
  --success-bg:     rgba(26, 127, 55, 0.08);
  --danger:         #cf222e;
  --danger-bg:      rgba(207, 34, 46, 0.08);
  --warning:        #9a6700;
  --warning-bg:     rgba(154, 103, 0, 0.08);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 12px 48px rgba(0, 0, 0, 0.15);
}

/* ===== Transitions for theme switching ===== */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/* Exclude certain elements from theme transition */
iframe,
input:focus,
button:active,
.no-transition,
.no-transition * {
  transition-property: none !important;
}