/* =============================================
   base.css — Reset, CSS variables, typography
   Theme: "Sillon" (vinyl record store).
   Every colour used anywhere in the app is defined here — never hardcode
   a hex value in page or component CSS.
   ============================================= */

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- CSS Custom Properties (design tokens) --- */
:root {
  /* Colors — palette taken from the Sillon store */
  --color-ink:          #201e1b;   /* main text, dark UI                  */
  --color-paper:        #f8f6f0;   /* page background                     */
  --color-cream:        #eee9de;   /* secondary surfaces, illustration    */
  --color-line:         #ded7c9;   /* hairlines, card borders             */
  --color-line-input:   #d4cabb;   /* form field borders                  */
  --color-line-strong:  #baa994;   /* outline buttons                     */
  --color-accent:       #ad582e;   /* terracotta: links, focus, highlights */
  --color-accent-soft:  #f1e2d6;   /* tinted backgrounds behind accent    */
  --color-dark:         #25241f;   /* primary buttons, dark bars          */
  --color-dark-hover:   #514234;
  --color-white:        #ffffff;

  /* Generated record covers (internal shop): pairs of [start, end] gradient colours */
  --cover-1-a: #ad582e;  --cover-1-b: #6e3418;
  --cover-2-a: #3d5a6c;  --cover-2-b: #1f2f3a;
  --cover-3-a: #7a8450;  --cover-3-b: #3f4727;
  --cover-4-a: #8c4a5e;  --cover-4-b: #4a2230;
  --cover-5-a: #c79a3b;  --cover-5-b: #7d5c14;
  --cover-6-a: #4f4a45;  --cover-6-b: #1c1a17;

  /* Semantic aliases (what the components actually use) */
  --color-text-primary:     var(--color-ink);
  --color-text-secondary:   #5c5750;
  --color-text-muted:       #77716a;
  --color-text-placeholder: #a39b90;
  --color-text-on-dark:     var(--color-paper);
  --color-bg-page:          var(--color-paper);
  --color-bg-surface:       var(--color-cream);
  --color-bg-field:         var(--color-white);
  --color-border:           var(--color-line);
  --color-disabled:         #c9c1b3;

  /* Typography */
  --font-sans:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  --font-size-xs:   10px;
  --font-size-sm:   12px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   20px;
  --font-size-xxl:  28px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-sm: 16px;
  --line-height-md: 20px;
  --line-height-lg: 24px;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  15px;
  --space-lg:  25px;

  /* Radii — Sillon uses almost square buttons and round pills */
  --radius-pill: 2000px;
  --radius-card: 3px;
  --radius-sm:   3px;
  --radius-md:   8px;

  /* Layout */
  --max-width:      393px;
  --header-height:  56px;
  --bottom-nav-height: 56px;
}

/* --- Base --- */
html {
  background: var(--color-bg-surface);
}

html, body {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-md);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background: var(--color-bg-page);
}

/* On wide screens (trade-show monitor) outline the phone-sized column */
@media (min-width: 394px) {
  body {
    box-shadow: 0 0 0 1px var(--color-line);
  }
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-regular);
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* --- Typography utilities --- */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-bold    { font-weight: var(--font-weight-bold); }
.font-serif   { font-family: var(--font-serif); }

.text-xs  { font-size: var(--font-size-xs); line-height: var(--line-height-sm); }
.text-sm  { font-size: var(--font-size-sm); line-height: var(--line-height-sm); }
.text-md  { font-size: var(--font-size-md); line-height: var(--line-height-md); }
.text-lg  { font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
.text-xl  { font-size: var(--font-size-xl); line-height: var(--line-height-lg); }
.text-xxl { font-size: var(--font-size-xxl); line-height: 30px; letter-spacing: -0.01em; }

/* Small uppercase label used above headings */
.eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --- Layout utilities --- */
.flex-row    { display: flex; flex-direction: row; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* --- Icon --- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon img, .icon svg {
  width: 100%;
  height: 100%;
}
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }