/* ============================================================
   X VIBE RECORDS — DESIGN TOKENS
   Concept: premium independent label shaped around the real X Vibe mark:
   matte black, lacquer-red flourish, silver lettering, champagne linework.
   Reference feel: Blue Note, XL Recordings, Warp packaging.
   ============================================================ */

:root {
  /* Type scale (fluid) */
  --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.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 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, 7.5rem);

  /* 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 — refined editorial pairing */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radius — soft, premium */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Content widths */
  --content-narrow: 720px;
  --content-default: 1100px;
  --content-wide: 1400px;

  /* Transitions */
  --transition-interactive: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow:        420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   DARK (default) — matte charcoal w/ glossy panels
   ============================================================ */
:root,
[data-theme='dark'] {
  /* Matte ink layers — deliberately not pure black */
  --color-bg:               #0B0B0D;
  --color-bg-2:             #0F0F12;     /* slight lift */
  --color-surface:          #141418;     /* matte panel */
  --color-surface-2:        #1A1A1F;     /* raised matte */
  --color-surface-offset:   #20202A;
  --color-divider:          #23232A;
  --color-border:           #2E2E38;
  --color-border-strong:    #3B3B47;

  /* Text */
  --color-text:        #ECEAE3;
  --color-text-muted:  #9C9A92;
  --color-text-faint:  #5A5862;
  --color-text-inverse:#0B0B0D;

  /* Accent — glossy logo red, with champagne as the secondary metallic */
  --color-accent:           #E3262E;
  --color-accent-hover:     #FF424B;
  --color-accent-active:    #B9151D;
  --color-accent-ink:       #0B0B0D;   /* text on accent */
  --color-accent-tint:      rgba(227, 38, 46, 0.12);
  --color-metal:            #D3B878;
  --color-silver:           #E9E6DE;

  /* Glossy panel gradients & highlights */
  --gloss-top:    rgba(255,255,255,0.06);
  --gloss-edge:   rgba(255,255,255,0.10);
  --gloss-inner:  rgba(255,255,255,0.04);
  --gloss-shadow: rgba(0,0,0,0.55);

  --panel-gradient:
    linear-gradient(180deg,
      rgba(255,255,255,0.045) 0%,
      rgba(255,255,255,0.012) 32%,
      rgba(0,0,0,0.18) 100%);

  --panel-border: 1px solid var(--color-border);
  --panel-highlight: inset 0 1px 0 var(--gloss-edge);

  /* Shadows — soft, ambient, never harsh */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.50);
  --shadow-lg: 0 32px 80px rgba(0,0,0,0.60);
  --shadow-glow: 0 0 0 1px rgba(227,38,46,0.22), 0 8px 30px rgba(227,38,46,0.16);

  /* Grain opacity */
  --grain-opacity: 0.045;
}

/* ============================================================
   LIGHT — warm ivory + matte ink
   ============================================================ */
[data-theme='light'] {
  --color-bg:               #F3F0E8;
  --color-bg-2:             #EFEBE0;
  --color-surface:          #FFFFFF;
  --color-surface-2:        #FAF7EF;
  --color-surface-offset:   #E9E4D6;
  --color-divider:          #DDD7C6;
  --color-border:           #C9C2AE;
  --color-border-strong:    #A89F87;

  --color-text:        #14131A;
  --color-text-muted:  #4F4C55;
  --color-text-faint:  #8B8779;
  --color-text-inverse:#FFFFFF;

  /* Accent — logo red tuned for contrast on ivory */
  --color-accent:           #B9151D;
  --color-accent-hover:     #951017;
  --color-accent-active:    #710B11;
  --color-accent-ink:       #FFFFFF;
  --color-accent-tint:      rgba(185, 21, 29, 0.10);
  --color-metal:            #806422;
  --color-silver:           #14131A;

  --gloss-top:    rgba(255,255,255,0.85);
  --gloss-edge:   rgba(255,255,255,1);
  --gloss-inner:  rgba(255,255,255,0.60);
  --gloss-shadow: rgba(20,20,20,0.10);

  --panel-gradient:
    linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.70) 32%,
      rgba(0,0,0,0.04) 100%);

  --panel-border: 1px solid var(--color-border);
  --panel-highlight: inset 0 1px 0 rgba(255,255,255,0.9);

  --shadow-sm: 0 1px 2px rgba(20,18,12,0.06);
  --shadow-md: 0 12px 32px rgba(20,18,12,0.10);
  --shadow-lg: 0 32px 80px rgba(20,18,12,0.14);
  --shadow-glow: 0 0 0 1px rgba(185,21,29,0.18), 0 8px 28px rgba(185,21,29,0.10);

  --grain-opacity: 0.025;
}

/* System default — light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:               #F3F0E8;
    --color-bg-2:             #EFEBE0;
    --color-surface:          #FFFFFF;
    --color-surface-2:        #FAF7EF;
    --color-surface-offset:   #E9E4D6;
    --color-divider:          #DDD7C6;
    --color-border:           #C9C2AE;
    --color-border-strong:    #A89F87;
    --color-text:        #14131A;
    --color-text-muted:  #4F4C55;
    --color-text-faint:  #8B8779;
    --color-text-inverse:#FFFFFF;
    --color-accent:           #B9151D;
    --color-accent-hover:     #951017;
    --color-accent-active:    #710B11;
    --color-accent-ink:       #FFFFFF;
    --color-accent-tint:      rgba(185, 21, 29, 0.10);
    --color-metal:            #806422;
    --color-silver:           #14131A;
    --gloss-top:    rgba(255,255,255,0.85);
    --gloss-edge:   rgba(255,255,255,1);
    --gloss-inner:  rgba(255,255,255,0.60);
    --gloss-shadow: rgba(20,20,20,0.10);
    --panel-gradient:
      linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.70) 32%,
        rgba(0,0,0,0.04) 100%);
    --shadow-sm: 0 1px 2px rgba(20,18,12,0.06);
    --shadow-md: 0 12px 32px rgba(20,18,12,0.10);
    --shadow-lg: 0 32px 80px rgba(20,18,12,0.14);
    --shadow-glow: 0 0 0 1px rgba(185,21,29,0.18), 0 8px 28px rgba(185,21,29,0.10);
    --grain-opacity: 0.025;
  }
}