/* ============================================================
   Belavista Design System
   Tokens & type — derived from Manual da Marca Belavista v1.0
   (Touch Branding, 2026)
   ============================================================ */

/* Fonts — Avenir Next LT Pro (licensed, provided by brand owner).
   Nunito Sans kept as a secondary fallback (brand-approved substitute). */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&display=swap');

/* Avenir Next LT Pro — Medium = 500, Demi = 600, Bold/Heavy = 700/800 */
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextLTPro-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextLTPro-MediumIt.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextLTPro-Demi.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextLTPro-DemiIt.otf') format('opentype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextLTPro-Heavy.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextLTPro-HeavyIt.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next';
  src: url('fonts/AvenirNextLTPro-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* Condensed variants — opt-in via `font-family: 'Avenir Next Condensed'` */
@font-face {
  font-family: 'Avenir Next Condensed';
  src: url('fonts/AvenirNextLTPro-Cn.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next Condensed';
  src: url('fonts/AvenirNextLTPro-MediumCn.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next Condensed';
  src: url('fonts/AvenirNextLTPro-DemiCn.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next Condensed';
  src: url('fonts/AvenirNextLTPro-BoldCn.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Avenir Next Condensed';
  src: url('fonts/AvenirNextLTPro-HeavyCn.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ------- Brand colours (from p. 63 of the manual) -------- */

  /* Primary */
  --bv-purple: #511865;            /* PANTONE P 97-16 C — 85 100 0 40 */
  --bv-blue:   #0076D6;            /* PANTONE P 112-8 C — 100 30 0 0 */

  /* Neutrals */
  --bv-white:       #FFFFFF;
  --bv-gray-cool:   #B8BABC;       /* Cool Gray 4 */
  --bv-gray:        #939397;       /* K 50 */
  --bv-gray-dark:   #4D4D4F;       /* K 85 */
  --bv-black:       #111112;

  /* Extended purple scale (derived via oklch from --bv-purple) */
  --bv-purple-50:  #F6F0F9;
  --bv-purple-100: #E7D6EE;
  --bv-purple-200: #CBA8D8;
  --bv-purple-300: #A87ABE;
  --bv-purple-400: #814F9F;
  --bv-purple-500: #511865;        /* ramp anchor */
  --bv-purple-600: #421252;
  --bv-purple-700: #330E3F;
  --bv-purple-800: #26092F;
  --bv-purple-900: #17061D;

  /* Extended blue scale */
  --bv-blue-50:  #E7F2FD;
  --bv-blue-100: #C2DEFA;
  --bv-blue-200: #7FB8F1;
  --bv-blue-300: #3D93E4;
  --bv-blue-400: #0076D6;          /* ramp anchor */
  --bv-blue-500: #005CA8;
  --bv-blue-600: #014685;
  --bv-blue-700: #02335F;

  /* Semantic surfaces */
  --bv-bg:            var(--bv-white);
  --bv-bg-alt:        #F5F3F7;
  --bv-bg-inverse:    var(--bv-purple);
  --bv-surface:       var(--bv-white);
  --bv-surface-raised:#FFFFFF;

  --bv-border:        #E6E4EA;
  --bv-border-strong: var(--bv-gray-cool);

  /* Semantic foreground */
  --bv-fg:         var(--bv-gray-dark);    /* body */
  --bv-fg-strong:  var(--bv-purple);       /* headings */
  --bv-fg-muted:   var(--bv-gray);
  --bv-fg-subtle:  var(--bv-gray-cool);
  --bv-fg-inverse: var(--bv-white);
  --bv-link:       var(--bv-blue);

  /* Status (derived, not defined in manual) */
  --bv-success: #2E7D4E;
  --bv-warning: #C77700;
  --bv-danger:  #B3261E;

  /* ------- Type families -------- */
  --bv-font-display: "Avenir Next", "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --bv-font-body:    "Avenir Next", "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --bv-font-condensed: "Avenir Next Condensed", "Avenir Next", "Nunito Sans", sans-serif;
  --bv-font-fallback:"Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --bv-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Weights mirror Avenir Next LT Pro family as shipped:
     Medium (500), Demi (600), Heavy (700/800) */
  --bv-weight-regular: 500;   /* Avenir Next Medium is the body weight */
  --bv-weight-demibold: 600;
  --bv-weight-bold: 700;
  --bv-weight-extrabold: 800;

  /* Type scale (rem @ 16px root) */
  --bv-text-xs:   0.75rem;  /* 12 */
  --bv-text-sm:   0.875rem; /* 14 */
  --bv-text-base: 1rem;     /* 16 */
  --bv-text-md:   1.125rem; /* 18 */
  --bv-text-lg:   1.375rem; /* 22 */
  --bv-text-xl:   1.75rem;  /* 28 */
  --bv-text-2xl:  2.25rem;  /* 36 */
  --bv-text-3xl:  3rem;     /* 48 */
  --bv-text-4xl:  4rem;     /* 64 */
  --bv-text-5xl:  5.5rem;   /* 88 — tagline / hero */

  --bv-leading-tight: 1.05;
  --bv-leading-snug:  1.2;
  --bv-leading-normal:1.45;
  --bv-leading-loose: 1.6;

  --bv-tracking-tight:  -0.02em;
  --bv-tracking-normal: 0em;
  --bv-tracking-wide:   0.04em;
  --bv-tracking-caps:   0.12em;

  /* ------- Spacing / radius / elevation -------- */
  --bv-space-0: 0;
  --bv-space-1: 4px;
  --bv-space-2: 8px;
  --bv-space-3: 12px;
  --bv-space-4: 16px;
  --bv-space-5: 24px;
  --bv-space-6: 32px;
  --bv-space-7: 48px;
  --bv-space-8: 64px;
  --bv-space-9: 96px;

  --bv-radius-xs: 2px;
  --bv-radius-sm: 4px;
  --bv-radius-md: 8px;
  --bv-radius-lg: 16px;
  --bv-radius-xl: 24px;
  --bv-radius-pill: 999px;
  /* The brand mark is built from a rectangle + ¼-circle;
     `--bv-radius-quarter` is the ratio used on grafismos. */
  --bv-radius-quarter: 50% 0 0 0;

  --bv-shadow-sm: 0 1px 2px rgba(36, 10, 46, 0.06);
  --bv-shadow-md: 0 4px 14px rgba(36, 10, 46, 0.08);
  --bv-shadow-lg: 0 18px 40px rgba(36, 10, 46, 0.14);
  --bv-shadow-focus: 0 0 0 3px rgba(81, 24, 101, 0.25);

  /* Motion */
  --bv-ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --bv-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --bv-dur-fast:   140ms;
  --bv-dur-med:    220ms;
  --bv-dur-slow:   380ms;
}

/* ----------- Semantic element styles ----------- */

html, body {
  font-family: var(--bv-font-body);
  color: var(--bv-fg);
  background: var(--bv-bg);
  font-size: var(--bv-text-base);
  line-height: var(--bv-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .bv-h1 {
  font-family: var(--bv-font-display);
  font-weight: var(--bv-weight-bold);
  font-size: var(--bv-text-4xl);
  line-height: var(--bv-leading-tight);
  letter-spacing: var(--bv-tracking-tight);
  color: var(--bv-fg-strong);
  margin: 0;
}

h2, .bv-h2 {
  font-family: var(--bv-font-display);
  font-weight: var(--bv-weight-demibold);
  font-size: var(--bv-text-3xl);
  line-height: var(--bv-leading-snug);
  letter-spacing: var(--bv-tracking-tight);
  color: var(--bv-fg-strong);
  margin: 0;
}

h3, .bv-h3 {
  font-family: var(--bv-font-display);
  font-weight: var(--bv-weight-demibold);
  font-size: var(--bv-text-2xl);
  line-height: var(--bv-leading-snug);
  color: var(--bv-fg-strong);
  margin: 0;
}

h4, .bv-h4 {
  font-family: var(--bv-font-display);
  font-weight: var(--bv-weight-demibold);
  font-size: var(--bv-text-xl);
  line-height: var(--bv-leading-snug);
  color: var(--bv-fg-strong);
  margin: 0;
}

p, .bv-body {
  font-size: var(--bv-text-base);
  line-height: var(--bv-leading-normal);
  color: var(--bv-fg);
  margin: 0 0 1em;
}

.bv-lead {
  font-size: var(--bv-text-md);
  line-height: var(--bv-leading-normal);
  color: var(--bv-fg);
}

.bv-small, small {
  font-size: var(--bv-text-sm);
  color: var(--bv-fg-muted);
}

.bv-eyebrow {
  font-size: var(--bv-text-xs);
  font-weight: var(--bv-weight-bold);
  letter-spacing: var(--bv-tracking-caps);
  text-transform: uppercase;
  color: var(--bv-fg-muted);
}

.bv-tagline {
  font-family: var(--bv-font-display);
  font-weight: var(--bv-weight-bold);
  font-size: var(--bv-text-5xl);
  line-height: 0.95;
  color: var(--bv-purple);
  letter-spacing: var(--bv-tracking-tight);
}
.bv-tagline em { color: var(--bv-blue); font-style: normal; }

a, .bv-link {
  color: var(--bv-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--bv-dur-fast) var(--bv-ease-standard);
}
a:hover { border-bottom-color: currentColor; }

code, kbd {
  font-family: var(--bv-font-mono);
  font-size: 0.92em;
  background: var(--bv-bg-alt);
  padding: 0.1em 0.35em;
  border-radius: var(--bv-radius-sm);
  color: var(--bv-purple);
}