/* style.css — Custom Palette + Font Definitions */

/* ── Font Families ── */
:root {
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Dark Theme (Default) ── */
:root, [data-theme="dark"] {
  --color-bg:             #0f0f0f;
  --color-surface:        #1a1a1a;
  --color-surface-2:      #242424;
  --color-surface-offset: #141414;
  --color-border:         #2a2a2a;
  --color-border-strong:  #333333;
  --color-divider:        #222222;

  --color-text:           #f0f0f0;
  --color-text-muted:     #999999;
  --color-text-faint:     #666666;
  --color-text-inverse:   #0f0f0f;

  --color-primary:        #00d4aa;
  --color-primary-hover:  #00e8bb;
  --color-primary-active: #00b896;
  --color-primary-highlight: rgba(0, 212, 170, 0.08);

  --color-success:        #4ade80;
  --color-error:          #f87171;
  --color-warning:        #fbbf24;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ── Light Theme ── */
[data-theme="light"] {
  --color-bg:             #f8f8f8;
  --color-surface:        #ffffff;
  --color-surface-2:      #f0f0f0;
  --color-surface-offset: #f4f4f4;
  --color-border:         #e0e0e0;
  --color-border-strong:  #cccccc;
  --color-divider:        #e8e8e8;

  --color-text:           #1a1a1a;
  --color-text-muted:     #666666;
  --color-text-faint:     #999999;
  --color-text-inverse:   #f8f8f8;

  --color-primary:        #00a884;
  --color-primary-hover:  #008e6e;
  --color-primary-active: #007a5e;
  --color-primary-highlight: rgba(0, 168, 132, 0.08);

  --color-success:        #22c55e;
  --color-error:          #ef4444;
  --color-warning:        #f59e0b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* ── System preference fallback ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:             #f8f8f8;
    --color-surface:        #ffffff;
    --color-surface-2:      #f0f0f0;
    --color-surface-offset: #f4f4f4;
    --color-border:         #e0e0e0;
    --color-border-strong:  #cccccc;
    --color-divider:        #e8e8e8;
    --color-text:           #1a1a1a;
    --color-text-muted:     #666666;
    --color-text-faint:     #999999;
    --color-text-inverse:   #f8f8f8;
    --color-primary:        #00a884;
    --color-primary-hover:  #008e6e;
    --color-primary-active: #007a5e;
    --color-primary-highlight: rgba(0, 168, 132, 0.08);
    --color-success:        #22c55e;
    --color-error:          #ef4444;
    --color-warning:        #f59e0b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  }
}