/* =========================================================================
 * Convotis Iberia — Colors + Typography
 * Source: CONVOTIS Brandbook ES 2025
 * =========================================================================
 *
 * The brand is built around two primary colors (CV Blue, CV Gray), four
 * "service-line" accents (Violet, Deep Teal, Red, Green), and the Barlow
 * type family. Gradations of 80/60/40/20% are sanctioned for each color.
 *
 * Use the semantic vars (--fg, --bg, --accent, --h1, ...) for components.
 * Use the raw vars (--cv-blue, --cv-gray, ...) only when you need the
 * literal brand color.
 * ========================================================================= */

/* Local Barlow TTFs (uploaded by brand owner) — full nine-weight family
   plus matching italics. */
@font-face { font-family:"Barlow"; font-style:normal; font-weight:100; src:url("fonts/Barlow-Thin.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:100; src:url("fonts/Barlow-ThinItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:200; src:url("fonts/Barlow-ExtraLight.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:200; src:url("fonts/Barlow-ExtraLightItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:300; src:url("fonts/Barlow-Light.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:300; src:url("fonts/Barlow-LightItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:400; src:url("fonts/Barlow-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:400; src:url("fonts/Barlow-Italic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:500; src:url("fonts/Barlow-Medium.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:500; src:url("fonts/Barlow-MediumItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:600; src:url("fonts/Barlow-SemiBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:600; src:url("fonts/Barlow-SemiBoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:700; src:url("fonts/Barlow-Bold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:700; src:url("fonts/Barlow-BoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:800; src:url("fonts/Barlow-ExtraBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:800; src:url("fonts/Barlow-ExtraBoldItalic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:normal; font-weight:900; src:url("fonts/Barlow-Black.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Barlow"; font-style:italic; font-weight:900; src:url("fonts/Barlow-BlackItalic.ttf") format("truetype"); font-display:swap; }

:root {
  /* ---------- PRIMARY COLORS (CV Blue + CV Gray) ---------- */
  --cv-blue:        #002a72;   /* R0  G42  B114 — Pantone 281 C */
  --cv-blue-80:     #335580;
  --cv-blue-60:     #6680a8;
  --cv-blue-40:     #99aac4;
  --cv-blue-20:     #ccd4e3;

  --cv-gray:        #f2eeea;   /* R242 G238 B234 — Pantone 7527 C */
  --cv-gray-80:     #f5f1ed;
  --cv-gray-60:     #f7f4f1;
  --cv-gray-40:     #faf7f5;
  --cv-gray-20:     #fcfbfa;

  /* Pure white + a true black for negative + 1c applications */
  --cv-white:       #ffffff;
  --cv-ink:         #0a0a0f;

  /* ---------- SECONDARY / SERVICE-LINE COLORS (accents only) ---------- */
  --cv-violet:      #473e7d;   /* "Empower IT" */
  --cv-violet-80:   #6c6597;
  --cv-violet-60:   #918bb1;
  --cv-violet-40:   #b6b2cb;
  --cv-violet-20:   #dad8e5;

  --cv-deep-teal:   #005870;   /* "Cloud Solutions" */
  --cv-deep-teal-80:#33798c;
  --cv-deep-teal-60:#669ba8;
  --cv-deep-teal-40:#99bcc5;
  --cv-deep-teal-20:#ccdde2;

  --cv-red:         #9f0737;   /* "Security Services" */
  --cv-red-80:      #b2395f;
  --cv-red-60:      #c66b87;
  --cv-red-40:      #d99caf;
  --cv-red-20:      #ecced7;

  --cv-green:       #039272;   /* "Data Science & AI" */
  --cv-green-80:    #35a88e;
  --cv-green-60:    #68beaa;
  --cv-green-40:    #9bd3c7;
  --cv-green-20:    #cde9e3;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:             var(--cv-white);
  --bg-soft:        var(--cv-gray);
  --bg-inverse:     var(--cv-blue);
  --surface:        var(--cv-white);
  --surface-soft:   var(--cv-gray);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg:             var(--cv-blue);    /* primary text on light bg */
  --fg-2:           #1d2c54;           /* slightly softer body */
  --fg-muted:       #5a6783;           /* metadata, captions */
  --fg-on-blue:     var(--cv-white);
  --fg-on-gray:     var(--cv-blue);

  /* ---------- BORDERS / DIVIDERS ---------- */
  --border:         #e3ddd6;           /* slightly warmer than gray */
  --border-strong:  var(--cv-blue-20);
  --divider:        rgba(0, 42, 114, 0.10);

  /* ---------- ACCENT (default = blue, override per service) ---------- */
  --accent:         var(--cv-blue);
  --accent-fg:      var(--cv-white);

  /* ---------- STATUS (mapped to brand secondaries) ---------- */
  --status-success: var(--cv-green);
  --status-danger:  var(--cv-red);
  --status-info:    var(--cv-deep-teal);
  --status-warning: #c89a1a;           /* not in brandbook — neutral amber */

  /* ---------- TYPE: family + scale ---------- */
  --font-sans:    "Barlow", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --weight-thin:        100;
  --weight-extralight:  200;
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;
  --weight-black:       900;

  /* Modular scale, 1.25 ratio, base 16px */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  80px;

  /* Line heights — Barlow runs tight; brandbook headlines are very tight */
  --lh-tight:    1.05;
  --lh-snug:     1.20;
  --lh-normal:   1.45;
  --lh-relaxed:  1.65;

  /* Tracking — Barlow uppercase eyebrows look best with positive tracking */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.14em;

  /* ---------- SPACING (4-pt grid) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  /* Convotis is a sober, geometric brand — radii stay small. Pills are
     reserved for tags / chips / status pellets. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Restrained — the brandbook explicitly forbids drop shadows on the
     logo and prefers a flat aesthetic. We use a single ambient shadow
     for cards + a focused one for menus. */
  --shadow-card:    0 1px 2px rgba(0, 42, 114, 0.06),
                    0 4px 14px rgba(0, 42, 114, 0.06);
  --shadow-pop:     0 8px 24px rgba(0, 42, 114, 0.12),
                    0 2px 6px  rgba(0, 42, 114, 0.08);
  --shadow-inner:   inset 0 0 0 1px var(--border);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --container-narrow: 720px;
  --container:        1120px;
  --container-wide:   1320px;
}

/* =========================================================================
 * Semantic typography
 * The brandbook defines a "headline concept": line 1 in Barlow Semibold
 * (statement / theme), lines 2-3 in Barlow Light (supporting). The .brand-
 * headline helper composes that pattern automatically.
 * ========================================================================= */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--text-base); line-height: var(--lh-normal); }

.h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-5);
}

.h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0 0 var(--space-4);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-4);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

.h5, h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-2);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}

.brand-headline {
  font-family: var(--font-sans);
  line-height: var(--lh-tight);
  color: var(--fg);
}
.brand-headline .lead {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
}
.brand-headline .support {
  display: block;
  font-weight: var(--weight-light);
  font-size: var(--text-3xl);
}

p, .body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

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

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg);
}

a {
  color: var(--cv-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--cv-blue-80); text-decoration-color: currentColor; }

::selection { background: var(--cv-blue); color: var(--cv-white); }