/* style.css — NoteScribe Design Tokens (Concert Hall / Instrument Palette) */

/* ─── TYPE SCALE ─────────────────────────────────────────────── */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.5vw,  1.125rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);
}

/* ─── SPACING (4px base) ─────────────────────────────────────── */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
}

/* ─── RADIUS / TRANSITION ────────────────────────────────────── */
:root {
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1280px;
  --content-full: 100%;
}

/* ─── FONTS ──────────────────────────────────────────────────── */
:root {
  --font-display: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;
}

/* ─── DARK MODE (PRIMARY / default) ─────────────────────────── */
/* Dark first — concert hall aesthetic, musicians in low light */
:root, [data-theme="dark"] {
  /* Surfaces — deep charcoal/navy */
  --color-bg:              #0f1117;
  --color-surface:         #161822;
  --color-surface-2:       #1c1f2e;
  --color-surface-offset:  #1a1c28;
  --color-surface-offset-2:#20243a;
  --color-surface-dynamic: #252840;
  --color-divider:         rgba(255,255,255,0.07);
  --color-border:          rgba(255,255,255,0.10);

  /* Text — warm cream */
  --color-text:            #e8e4dc;
  --color-text-muted:      #8a8698;
  --color-text-faint:      #4a4760;
  --color-text-inverse:    #0f1117;

  /* Primary accent — warm amber/gold (brass instruments, stage lights) */
  --color-primary:         #d4a054;
  --color-primary-hover:   #e8b66d;
  --color-primary-active:  #f0c882;
  --color-primary-highlight: rgba(212, 160, 84, 0.15);

  /* Secondary — subtle blue (interactive states) */
  --color-blue:            #4a7fd4;
  --color-blue-hover:      #6699e8;
  --color-blue-active:     #7aaaf0;
  --color-blue-highlight:  rgba(74, 127, 212, 0.15);

  /* Semantic */
  --color-success:         #6daa45;
  --color-success-hover:   #4d8f25;
  --color-success-highlight: rgba(109, 170, 69, 0.15);
  --color-error:           #e05c5c;
  --color-error-hover:     #c44040;
  --color-error-highlight: rgba(224, 92, 92, 0.15);
  --color-warning:         #d4a054;
  --color-warning-hover:   #e8b66d;
  --color-warning-highlight: rgba(212, 160, 84, 0.15);

  /* Note colors */
  --color-note-active:     #d4a054;
  --color-note-past:       rgba(212, 160, 84, 0.5);
  --color-staff-line:      rgba(232, 228, 220, 0.5);
  --color-staff-line-active: #e8e4dc;

  /* Shadows */
  --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 12px 32px rgba(0,0,0,0.5);

  /* Tuner specific */
  --color-tuner-bg:        #0c0e18;
  --color-tuner-needle:    #d4a054;
  --color-tuner-sharp:     #e05c5c;
  --color-tuner-flat:      #4a7fd4;
  --color-tuner-center:    #6daa45;
}

/* ─── LIGHT MODE ─────────────────────────────────────────────── */
[data-theme="light"] {
  --color-bg:              #f4f2ed;
  --color-surface:         #faf9f6;
  --color-surface-2:       #ffffff;
  --color-surface-offset:  #eeece7;
  --color-surface-offset-2:#e8e5df;
  --color-surface-dynamic: #e0ddd7;
  --color-divider:         rgba(0,0,0,0.08);
  --color-border:          rgba(0,0,0,0.12);

  --color-text:            #1a1710;
  --color-text-muted:      #6b6760;
  --color-text-faint:      #a09d95;
  --color-text-inverse:    #faf9f6;

  --color-primary:         #9a6e2a;
  --color-primary-hover:   #7a5418;
  --color-primary-active:  #5c3e0e;
  --color-primary-highlight: rgba(154, 110, 42, 0.12);

  --color-blue:            #2b5bac;
  --color-blue-hover:      #1e4490;
  --color-blue-active:     #153474;
  --color-blue-highlight:  rgba(43, 91, 172, 0.12);

  --color-success:         #437a22;
  --color-success-hover:   #2e5c10;
  --color-success-highlight: rgba(67, 122, 34, 0.12);
  --color-error:           #c0392b;
  --color-error-hover:     #a02c20;
  --color-error-highlight: rgba(192, 57, 43, 0.12);
  --color-warning:         #9a6e2a;
  --color-warning-hover:   #7a5418;
  --color-warning-highlight: rgba(154, 110, 42, 0.12);

  --color-note-active:     #9a6e2a;
  --color-note-past:       rgba(154, 110, 42, 0.5);
  --color-staff-line:      rgba(26, 23, 16, 0.4);
  --color-staff-line-active: #1a1710;

  --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 12px 32px rgba(0,0,0,0.12);

  --color-tuner-bg:        #eeece7;
  --color-tuner-needle:    #9a6e2a;
  --color-tuner-sharp:     #c0392b;
  --color-tuner-flat:      #2b5bac;
  --color-tuner-center:    #437a22;
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:              #0f1117;
    --color-surface:         #161822;
    --color-surface-2:       #1c1f2e;
    --color-surface-offset:  #1a1c28;
    --color-surface-offset-2:#20243a;
    --color-surface-dynamic: #252840;
    --color-divider:         rgba(255,255,255,0.07);
    --color-border:          rgba(255,255,255,0.10);
    --color-text:            #e8e4dc;
    --color-text-muted:      #8a8698;
    --color-text-faint:      #4a4760;
    --color-text-inverse:    #0f1117;
    --color-primary:         #d4a054;
    --color-primary-hover:   #e8b66d;
    --color-primary-active:  #f0c882;
    --color-primary-highlight: rgba(212, 160, 84, 0.15);
    --color-blue:            #4a7fd4;
    --color-note-active:     #d4a054;
    --color-note-past:       rgba(212, 160, 84, 0.5);
    --color-staff-line:      rgba(232, 228, 220, 0.5);
    --color-staff-line-active: #e8e4dc;
    --color-tuner-bg:        #0c0e18;
    --color-tuner-needle:    #d4a054;
    --color-tuner-sharp:     #e05c5c;
    --color-tuner-flat:      #4a7fd4;
    --color-tuner-center:    #6daa45;
    --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 12px 32px rgba(0,0,0,0.5);
  }
}

/* ─── COMMON COMPONENTS ──────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition-interactive), color var(--transition-interactive), border-color var(--transition-interactive);
  white-space: nowrap;
  min-height: 44px;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }

.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-dynamic); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--color-surface-offset); color: var(--color-text); }

.btn-danger {
  background: var(--color-error);
  color: #fff;
}
.btn-danger:hover { background: var(--color-error-hover); }

/* Icon button */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  cursor: pointer;
  transition: background var(--transition-interactive), color var(--transition-interactive);
}
.btn-icon:hover { background: var(--color-surface-offset); color: var(--color-text); }

/* Card */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

/* Input */
.input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: border-color var(--transition-interactive);
  min-height: 44px;
}
.input:focus { outline: none; border-color: var(--color-primary); }

/* Divider */
.divider {
  height: 1px;
  background: var(--color-divider);
  margin: var(--space-4) 0;
}