/* ============================================================
   AVVERO ASSET — Design Tokens
   Colors, type scale, spacing, radii, shadows.
   Source: Identidade Visual_Avvero.pdf (2025), logo color sampling.
   ============================================================ */

/* --- Web fonts --------------------------------------------- */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Static fallbacks (useful where variable fonts aren't supported) */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Thin.ttf")       format("truetype"); font-weight: 100; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-ExtraLight.ttf") format("truetype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Light.ttf")      format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.ttf")    format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.ttf")     format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.ttf")   format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Bold.ttf")       format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-ExtraBold.ttf")  format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Black.ttf")      format("truetype"); font-weight: 900; font-display: swap; }


:root {
  /* ========================================================
     BRAND CORE
     Two-color palette sampled directly from the master logo.
     ======================================================== */
  --avvero-navy:        #081848;   /* primary — wordmark, headings, primary surface */
  --avvero-blue:        #3888C8;   /* accent — the "V" cut, "asset." suffix, links, highlights */

  /* Tonal ramps — derived from brand colors in OKLCH for smooth scales.
     Use these for surfaces, borders, hover states, charts.          */

  /* Navy scale — deep institutional blue */
  --navy-50:   #eef1f8;
  --navy-100:  #d5dcea;
  --navy-200:  #a9b6d1;
  --navy-300:  #7487b3;
  --navy-400:  #465c93;
  --navy-500:  #253a75;
  --navy-600:  #142861;
  --navy-700:  #0c1d54;
  --navy-800:  #081848;   /* = brand navy */
  --navy-900:  #050f2e;
  --navy-950:  #020717;

  /* Blue scale — fluid, human, highlight */
  --blue-50:   #eef6fc;
  --blue-100:  #d6e9f6;
  --blue-200:  #aed3ed;
  --blue-300:  #7eb7df;
  --blue-400:  #5ba1d3;
  --blue-500:  #3888c8;   /* = brand blue */
  --blue-600:  #2a6ea7;
  --blue-700:  #205687;
  --blue-800:  #1a456c;
  --blue-900:  #123150;
  --blue-950:  #091d33;

  /* Neutrals — cool grays that sit beside navy/blue without clashing */
  --gray-0:    #ffffff;
  --gray-50:   #f7f8fa;
  --gray-100:  #eef0f4;
  --gray-200:  #dde1e9;
  --gray-300:  #c3cad6;
  --gray-400:  #9ba3b3;
  --gray-500:  #6d7689;
  --gray-600:  #4d5566;
  --gray-700:  #363c4b;
  --gray-800:  #22283a;   /* off-black, not pure black */
  --gray-900:  #10152a;

  /* Semantic (used sparingly — Avvero is primarily a 2-color system) */
  --success:   #2d9a6b;
  --warning:   #c98d1f;
  --danger:    #b53a3a;

  /* ========================================================
     SEMANTIC COLOR TOKENS (use these in components)
     ======================================================== */
  --bg:             var(--gray-0);         /* canvas */
  --bg-subtle:      var(--gray-50);        /* alt rows, subtle cards */
  --bg-muted:       var(--gray-100);       /* grouped panels */
  --bg-inverse:     var(--avvero-navy);    /* navy hero/footer */

  --fg:             var(--gray-900);       /* primary text on light */
  --fg-strong:      var(--avvero-navy);    /* headings */
  --fg-muted:       var(--gray-600);       /* secondary text */
  --fg-subtle:      var(--gray-500);       /* captions, meta */
  --fg-inverse:     var(--gray-0);         /* text on navy */
  --fg-inverse-muted: rgba(255,255,255,0.72);

  --accent:         var(--avvero-blue);    /* link / cta accent */
  --accent-hover:   var(--blue-600);
  --accent-soft:    var(--blue-50);

  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-inverse: rgba(255,255,255,0.14);
  --focus-ring:     color-mix(in oklch, var(--avvero-blue) 55%, transparent);

  /* ========================================================
     GRADIENTS
     Geometric navy→blue gradients reference the brand booklet's
     "tons de azul" and the "fluid / human" principle it asks for.
     ======================================================== */
  --grad-brand:       linear-gradient(135deg, var(--avvero-navy) 0%, var(--avvero-blue) 100%);
  --grad-brand-soft:  linear-gradient(135deg, var(--navy-700) 0%, var(--blue-600) 100%);
  --grad-protect:     linear-gradient(180deg, rgba(8,24,72,0) 0%, rgba(8,24,72,0.85) 100%);
  --grad-deep:        radial-gradient(120% 80% at 20% 10%, var(--navy-700) 0%, var(--avvero-navy) 55%, var(--navy-950) 100%);

  /* ========================================================
     TYPOGRAPHY
     Single family: Geist. Hierarchy comes from weight + size.
     ======================================================== */
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;   /* same family, heavier weights */
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type scale — a modest, institutional scale (ratio ~1.200) */
  --fs-12:  0.75rem;    /* 12 — micro caption */
  --fs-13:  0.8125rem;  /* 13 — meta */
  --fs-14:  0.875rem;   /* 14 — small body / UI */
  --fs-16:  1rem;       /* 16 — body */
  --fs-18:  1.125rem;   /* 18 — large body / lede */
  --fs-20:  1.25rem;    /* 20 — h5 */
  --fs-24:  1.5rem;     /* 24 — h4 */
  --fs-30:  1.875rem;   /* 30 — h3 */
  --fs-36:  2.25rem;    /* 36 — h2 */
  --fs-48:  3rem;       /* 48 — h1 */
  --fs-60:  3.75rem;    /* 60 — display */
  --fs-80:  5rem;       /* 80 — hero */

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-caps:   0.08em;

  /* Weight tokens — brand prescribes Black/ExtraBold for titles,
     SemiBold/Medium for subtitles, Regular/Light for body. */
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ========================================================
     SPACING — 4-px base grid
     ======================================================== */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ========================================================
     RADII — restrained. The brand wants institutional precision,
     so corners are subtle. Pills only for tags/buttons.
     ======================================================== */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ========================================================
     ELEVATION — flat by default; shadows are soft and cool-tinted
     ======================================================== */
  --shadow-xs:  0 1px 2px rgba(8, 24, 72, 0.06);
  --shadow-sm:  0 1px 3px rgba(8, 24, 72, 0.08), 0 1px 2px rgba(8, 24, 72, 0.04);
  --shadow-md:  0 6px 16px rgba(8, 24, 72, 0.08), 0 2px 4px rgba(8, 24, 72, 0.04);
  --shadow-lg:  0 18px 40px rgba(8, 24, 72, 0.12), 0 4px 10px rgba(8, 24, 72, 0.05);
  --shadow-xl:  0 32px 64px rgba(8, 24, 72, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ========================================================
     MOTION — calm, deliberate. No bounce.
     ======================================================== */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.5, 0, 1, 0.5);
  --ease-inout: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ========================================================
     LAYOUT
     ======================================================== */
  --container-sm: 640px;
  --container-md: 896px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
}


/* ============================================================
   SEMANTIC ELEMENT STYLES — applied by default when this file is loaded.
   Components can override; these are the house voice.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-48); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-36); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-30); font-weight: var(--fw-bold);      letter-spacing: var(--ls-snug); }
h4 { font-size: var(--fs-24); font-weight: var(--fw-semibold);  letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-20); font-weight: var(--fw-semibold);  line-height: var(--lh-snug); }
h6 { font-size: var(--fs-16); font-weight: var(--fw-semibold);  text-transform: uppercase; letter-spacing: var(--ls-caps); }

p {
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.lede, .lead {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  font-weight: var(--fw-regular);
}

small, .small { font-size: var(--fs-14); color: var(--fg-muted); }
.caption { font-size: var(--fs-13); color: var(--fg-subtle); letter-spacing: var(--ls-snug); }

.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}

::selection {
  background: color-mix(in oklch, var(--avvero-blue) 30%, transparent);
  color: var(--avvero-navy);
}