/* Vibelist site — shared styles */

@font-face {
  font-family: 'Fraunces';
  src: url('./fonts/Fraunces-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Fraunces';
  src: url('./fonts/Fraunces-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}
@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'CarterOne';
  src: url('./fonts/CarterOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Theme tokens (we mostly inline per variant, but keep accents available) */
:root {
  --accent-cobalt:   #67E8F9;
  --accent-emeraude: #28AF4B;
  --accent-ambre:    #F5EBD2;
  --accent-brique:   #C85F4B;
  --accent-petrole:  #5EEAD4;

  --font-display: 'Fraunces', Georgia, ui-serif, serif;
  --font-ui:      'Geist', 'Helvetica Neue', system-ui, sans-serif;
  --font-vibe:    'CarterOne', 'Fraunces', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

/* Phone frame helper — defaults are tuned for HERO size (~280-320px wide) */
.phone-frame {
  position: relative;
  border-radius: 44px;
  background: #0a0a0a;
  padding: 10px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.06);
}
.phone-frame .phone-screen {
  border-radius: 36px;
  overflow: hidden;
  display: block;
  width: 100%;
}
.phone-frame::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: #0a0a0a;
  border-radius: 14px;
  z-index: 2;
}
/* SMALL variant — used in gallery / contexts where the phone is ~150-180px wide */
.phone-frame.phone-sm {
  border-radius: 26px;
  padding: 5px;
  box-shadow:
    0 18px 36px -14px rgba(0,0,0,0.3),
    0 0 0 1px rgba(0,0,0,0.06);
}
.phone-frame.phone-sm .phone-screen { border-radius: 22px; }
.phone-frame.phone-sm::after {
  top: 9px;
  width: 50px;
  height: 14px;
  border-radius: 8px;
}

/* Subtle scroll cue */
.scroll-cue {
  width: 1px;
  height: 48px;
  background: currentColor;
  opacity: 0.25;
}