/* style.css — Label Detective Design System */
/* Custom palette: dark warm brown bg, amber/gold accent, cream text */

/* Google Fonts: Playfair Display + Inter */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..700&family=Inter:wght@300..700&display=swap');

:root {
  /* ── Type Scale ─────────────────────────────── */
  --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) ─────────────────────── */
  --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;

  /* ── Fonts ──────────────────────────────────── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;

  /* ── Radius ─────────────────────────────────── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Transitions ────────────────────────────── */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);

  /* ── Content Widths ─────────────────────────── */
  --content-narrow:  640px;
  --content-default: 900px;
  --content-wide:    1200px;

  /* ── RECORD SHOP PALETTE (Dark) ─────────────── */
  /* Warm near-black backgrounds */
  --color-bg:              #1a1510;
  --color-surface:         #201a13;
  --color-surface-2:       #261f17;
  --color-surface-3:       #2d2419;
  --color-surface-offset:  #32291e;
  --color-divider:         #3d3128;
  --color-border:          #4a3d2e;

  /* Cream / warm off-white text */
  --color-text:            #f0e8d8;
  --color-text-muted:      #b8a88a;
  --color-text-faint:      #7a6c56;
  --color-text-inverse:    #1a1510;

  /* Amber / gold accent */
  --color-accent:          #c8872a;
  --color-accent-hover:    #e09a35;
  --color-accent-active:   #a8701f;
  --color-accent-highlight:#3d2a12;
  --color-accent-bright:   #f0a840;
  --color-gold:            #d4a017;
  --color-gold-light:      #f0c040;

  /* Semantic colors */
  --color-success:         #5a8a3a;
  --color-success-bright:  #7ab050;
  --color-success-bg:      #1e2d15;
  --color-error:           #9a3020;
  --color-error-bright:    #c04030;
  --color-error-bg:        #2d1510;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 3px oklch(0.08 0.03 50 / 0.5);
  --shadow-md: 0 4px 16px oklch(0.08 0.03 50 / 0.6);
  --shadow-lg: 0 12px 40px oklch(0.08 0.03 50 / 0.7);
  --shadow-glow: 0 0 30px oklch(0.55 0.15 50 / 0.3);
}

/* Light mode toggle (unused in this app — dark only by design) */
[data-theme="light"] {
  --color-bg:             #f5f0e8;
  --color-surface:        #faf6ee;
  --color-surface-2:      #fff9f0;
  --color-surface-3:      #f0ead8;
  --color-surface-offset: #e8e0cc;
  --color-divider:        #d4c8a8;
  --color-border:         #c4b898;
  --color-text:           #2a1e0a;
  --color-text-muted:     #6a5535;
  --color-text-faint:     #a08858;
  --color-text-inverse:   #f5f0e8;
  --color-accent:         #9a6018;
  --color-accent-hover:   #b07020;
  --color-accent-active:  #7a4c10;
  --color-accent-highlight: #f0e0c0;
  --color-accent-bright:  #c07825;
  --color-gold:           #a88010;
  --color-gold-light:     #c09820;
  --color-success:        #3a7020;
  --color-success-bright: #5a9035;
  --color-success-bg:     #e0ecd0;
  --color-error:          #8a2015;
  --color-error-bright:   #a83020;
  --color-error-bg:       #f0d8d0;
  --shadow-sm: 0 1px 3px oklch(0.3 0.05 50 / 0.15);
  --shadow-md: 0 4px 16px oklch(0.3 0.05 50 / 0.12);
  --shadow-lg: 0 12px 40px oklch(0.3 0.05 50 / 0.15);
  --shadow-glow: 0 0 30px oklch(0.55 0.15 50 / 0.2);
}