/* ==========================================================================
   Portugal Music — design tokens
   Values read directly from Figma: CbcY5b4FIlHXNsUBy7rf4p
   Desktop frame 623:195 · Mobile frame 644:258
   ========================================================================== */

:root {
  /* Surfaces --------------------------------------------------------------- */
  --bg:        #050506;  /* page */
  --surf:      #0c0c0f;  /* cards, site boxes */
  --slot:      #131318;  /* empty media slots */

  /* Ink -------------------------------------------------------------------- */
  --ink:       #f4f6fb;  /* primary text */
  --muted:     #9aa6b8;  /* body copy */
  --dim:       #5c6473;  /* eyebrows, footer */

  /* Accents ---------------------------------------------------------------- */
  --teal:      #06cbc4;  /* primary accent, roles, main-site CTA */
  --red:       #ff4633;  /* secondary accent, headline stop, show CTA */

  /* Lines ------------------------------------------------------------------ */
  --line:      rgba(244, 246, 251, .12);
  --line-soft: rgba(244, 246, 251, .09);
  --line-slot: rgba(244, 246, 251, .08);

  /* Type ------------------------------------------------------------------- */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-ui:      "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Cousine", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Mono eyebrows carry 5% tracking throughout, per the Figma spec */
  --track-mono: .05em;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

/* Visible keyboard focus everywhere ---------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Screen-reader-only ------------------------------------------------------- */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--teal);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  transition: top .16s ease;
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}