/* ============================================================
   SOUTEC DESIGN SYSTEM — Colors & Type
   Brand: Soutec (soutec-group.com) — IT managed services, LATAM
   ------------------------------------------------------------
   Values verified against the production Nuxt/Vuetify codebase
   (assets/_variables.scss, styles.scss, _common.scss).
   Primary typeface: Quattrocento Sans. Secondary: Roboto.

   Fonts are SELF-HOSTED from /fonts (brand files uploaded by the
   user). No Google Fonts CDN needed. Material Icons (UI chrome
   only) is not bundled — see README › Iconography.
   ============================================================ */

/* ---------- Quattrocento Sans (primary) ---------- */
@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Roboto (secondary, variable) ---------- */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS (from codebase _variables.scss) ---------- */
  --soutec-cyan:        #00A6BC;  /* palette-primary-main — logo, highlight keywords (.sc_title), links */
  --soutec-blue:        #006699;  /* palette-secondary-main — solution panels, hero bg, primary buttons */
  --soutec-blue-dark:   #004F64;  /* deep panels / footer accents (from brand palette) */
  --soutec-charcoal:    #333333;  /* light-text-primary — body text */
  --soutec-yellow:      #F2D13F;  /* brand-palette accent — step badges, alert "!" icons */
  --soutec-crimson:     #C81E54;  /* brand-palette accent — sparingly */
  --soutec-green:       #47B45A;  /* brand-palette accent — success / sustainability */

  /* ---------- TINTS / SHADES (derived) ---------- */
  --soutec-cyan-700:    #008DA0;
  --soutec-cyan-100:    #d6f0f4;
  --soutec-blue-700:    #00557f;
  --soutec-teal-hero:   #18B4C4;  /* brighter cyan used on full teal sections (3-pasos band) */

  /* ---------- NEUTRALS ---------- */
  --soutec-white:       #ffffff;
  --soutec-bg:          #F6F6F6;  /* v-main background */
  --soutec-bg-alt:      #efefef;
  --soutec-border:      #BEBEBE;  /* v-divider border-color */
  --soutec-gray-500:    #737B7D;  /* light-text-secondary — muted intros, "Por ello…" */
  --soutec-gray-700:    #565e5d;

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg-1:   var(--soutec-charcoal);   /* primary text #333 */
  --fg-2:   var(--soutec-gray-500);   /* secondary text #737B7D */
  --fg-3:   var(--soutec-gray-500);   /* muted / captions */
  --fg-on-blue: #ffffff;
  --fg-on-blue-soft: #d4e6ee;
  --fg-link: var(--soutec-cyan);
  --fg-accent: var(--soutec-cyan);

  /* ---------- SEMANTIC SURFACES ---------- */
  --surface-page:   var(--soutec-bg);
  --surface-card:   #ffffff;
  --surface-blue:   var(--soutec-blue);
  --surface-blue-dark: var(--soutec-blue-dark);
  --surface-teal:   var(--soutec-teal-hero);

  /* ---------- TYPE FAMILIES ---------- */
  --font-base:    'Quattrocento Sans', sans-serif;   /* primary — headings, most copy */
  --font-display: 'Quattrocento Sans', sans-serif;
  --font-roboto:  'Roboto', sans-serif;              /* secondary — hero subtitle, step text, UI numerals */

  /* ---------- TYPE SCALE (desktop, from styles.scss / _common.scss) ---------- */
  --text-hero:   55px;  /* sc-font3 — hero statement (lg) */
  --text-h1:     51px;  /* .text-h1 */
  --text-h2:     32px;  /* .text-h2 — section intro */
  --text-h3:     28px;  /* .text-h3 — panel titles */
  --text-h4:     25px;  /* .text-h4 */
  --text-title:  48px;  /* .use-text-title */
  --text-title2: 36px;  /* .use-text-title2 */
  --text-subtitle:  28px; /* .use-text-subtitle */
  --text-subtitle2: 22px; /* .use-text-subtitle2 */
  --text-body:   16px;  /* base / .use-text-paragraph */
  --text-small:  14px;
  --text-eyebrow:14px;

  /* ---------- FONT WEIGHTS ---------- */
  --fw-light:   300;  /* hero intro, section titles (light) */
  --fw-regular: 400;
  --fw-medium:  500;  /* Roboto medium — step text */
  --fw-bold:    700;

  /* ---------- RADII (from _variables.scss) ---------- */
  --radius-pill:   999px;   /* CTA buttons render as pills */
  --rounded-small: 8px;     /* $rounded-small */
  --rounded-medium:12px;    /* $rounded-medium */
  --rounded-big:   20px;    /* $rounded-big */
  --radius-card:   8px;
  --radius-badge:  50%;
  --radius-chip:   8px;

  /* ---------- SHADOWS ---------- */
  --shadow-card:   0 2px 14px rgba(0, 79, 100, 0.08);
  --shadow-card-hover: 0 8px 26px rgba(0, 79, 100, 0.16);
  --shadow-pill:   0 3px 8px rgba(0, 0, 0, 0.20);   /* vuetify elevation-2 feel */
  --shadow-float:  0 14px 40px rgba(0, 60, 80, 0.22);

  /* ---------- SPACING (8px base unit — $unit) ---------- */
  --space-1: 8px;    /* $spacing1 */
  --space-2: 16px;   /* $spacing2 */
  --space-3: 24px;   /* $spacing3 */
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---------- MOTION ---------- */
  --ease-soutec: cubic-bezier(0.25, 0.8, 0.5, 1);  /* vuetify-style ease */
  --dur-fast: 140ms;
  --dur-base: 240ms;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
body {
  font-family: var(--font-base);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

/* Hero statement — uppercase, big, mixed weight (light intro → bold payoff). */
.soutec-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--fg-on-blue);
  text-wrap: balance;
}

h1, .soutec-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  line-height: 1.0;
  color: var(--soutec-blue);
}

/* Section intro — light gray with a cyan keyword. (.sc_sub_title + .sc_title) */
h2, .soutec-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-light);
  line-height: 1.0;
  color: var(--soutec-gray-500);
}
.soutec-h2 strong, .soutec-keyword {
  color: var(--soutec-cyan);
  font-weight: var(--fw-bold);
}

/* Panel / card title — uppercase, blue or white. */
h3, .soutec-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--soutec-blue);
}

h4, .soutec-h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--fw-bold);
  color: var(--soutec-blue);
}

p, .soutec-body {
  font-family: var(--font-base);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--fg-1);
}

small, .soutec-small {
  font-size: var(--text-small);
  color: var(--fg-3);
}

/* Eyebrow / tab / nav label — uppercase, spaced. */
.soutec-eyebrow {
  font-family: var(--font-base);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-1);
}

/* Roboto helper — hero subtitle, step copy, numerals. */
.soutec-roboto { font-family: var(--font-roboto); }

a, .soutec-link {
  color: var(--fg-link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-soutec);
}
a:hover, .soutec-link:hover { opacity: 0.75; }