/* =========================================================
   BEYOND Specialized Recruiting — Design tokens
   Brand colors: Navy + Pantone 639 (vibrant cyan)
   ========================================================= */

/* ---------- Fonts ----------
   Original brand fonts: Gotham (Book/Bold), Minion Pro (editorial),
   Roboto (Regular), Roboto Condensed (Light/Regular).

   Substitutions used here (Gotham/Minion are not free):
   - Gotham         → Manrope          (geometric humanist)
   - Roboto / Cond  → Roboto / Roboto Condensed  (exact)
   - Editorial role → Roboto Condensed Light at display size
                       (we have the actual brand TTF; no italic serif needed)
   - Songti         → Noto Serif (CJK fallback, when needed)
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Roboto+Condensed:wght@300;400;500;700&display=swap");

/* Local Roboto Condensed Light (the only original font file we have) */
@font-face {
  font-family: "Roboto Condensed Local";
  src: url("../fonts/RobotoCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============== COLORS ============== */

  /* Brand primaries */
  --byd-navy:        #1A2D4F;   /* Azul Marinho Profundo — primary text + dominant brand */
  --byd-navy-deep:   #0E1B35;   /* darker shade for contrast surfaces */
  --byd-navy-soft:   #2B416B;   /* hover / secondary navy */
  --byd-cyan:        #00A0DF;   /* Pantone 639 — accent, diagonal stripe */
  --byd-cyan-bright: #19B2EE;   /* hover state for cyan */
  --byd-cyan-deep:   #0083B8;   /* pressed / darker cyan */

  /* Navy scale (tints) */
  --byd-navy-900: #0E1B35;
  --byd-navy-800: #1A2D4F;
  --byd-navy-700: #2B416B;
  --byd-navy-600: #44588040;
  --byd-navy-500: #5C6F94;
  --byd-navy-400: #8898B6;
  --byd-navy-300: #B7C2D5;
  --byd-navy-200: #D8DEEA;
  --byd-navy-100: #ECEFF5;
  --byd-navy-050: #F5F7FB;

  /* Cyan scale (tints of Pantone 639) */
  --byd-cyan-900: #003E59;
  --byd-cyan-800: #005A82;
  --byd-cyan-700: #0083B8;
  --byd-cyan-600: #00A0DF;   /* base */
  --byd-cyan-500: #19B2EE;
  --byd-cyan-400: #5BC6F0;
  --byd-cyan-300: #8FD7F4;
  --byd-cyan-200: #BFE6F8;
  --byd-cyan-100: #E1F2FB;
  --byd-cyan-050: #F0F8FD;

  /* Neutrals */
  --byd-white:    #FFFFFF;
  --byd-paper:    #FAFBFC;
  --byd-ash:      #F2F4F7;
  --byd-stone:    #E4E7EC;
  --byd-graphite: #667085;
  --byd-charcoal: #344054;
  --byd-ink:      #1A2D4F;     /* alias of navy for body text */
  --byd-black:    #0B1320;

  /* Semantic */
  --byd-success: #2E8F62;
  --byd-warning: #D8941A;
  --byd-danger:  #C13B3B;
  --byd-info:    var(--byd-cyan);

  /* Foreground / background tokens */
  --fg-1: var(--byd-ink);        /* primary text */
  --fg-2: var(--byd-charcoal);   /* secondary text */
  --fg-3: var(--byd-graphite);   /* tertiary / meta text */
  --fg-onbrand: #FFFFFF;         /* on navy / cyan */
  --fg-accent:  var(--byd-cyan);

  --bg-1: var(--byd-white);
  --bg-2: var(--byd-paper);
  --bg-3: var(--byd-ash);
  --bg-brand:      var(--byd-navy);
  --bg-brand-deep: var(--byd-navy-deep);
  --bg-accent:     var(--byd-cyan);

  --border-1: var(--byd-stone);
  --border-2: var(--byd-navy-200);
  --border-strong: var(--byd-navy);

  /* ============== TYPOGRAPHY ============== */

  /* Font families */
  --font-display: "Manrope", "Gotham", "Helvetica Neue", Arial, sans-serif;     /* Gotham substitute */
  --font-body:    "Roboto", "Helvetica Neue", Arial, sans-serif;                /* functional sans */
  --font-cond:    "Roboto Condensed", "Roboto Condensed Local", "Arial Narrow", sans-serif;   /* condensed — also editorial at display size */
  --font-editorial: "Roboto Condensed", "Roboto Condensed Local", "Arial Narrow", sans-serif; /* alias: editorial role */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes (rem-based, 16px root) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  4rem;      /* 64 */
  --fs-6xl:  5.5rem;    /* 88 — hero display */

  /* Weights */
  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 800;

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;   /* uppercase eyebrows / nav labels */

  /* Leading */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  /* ============== SPACING / RADII / SHADOW ============== */

  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(14, 27, 53, 0.06);
  --shadow-sm: 0 2px 6px rgba(14, 27, 53, 0.08);
  --shadow-md: 0 6px 18px rgba(14, 27, 53, 0.10);
  --shadow-lg: 0 16px 40px rgba(14, 27, 53, 0.14);
  --shadow-brand: 0 12px 32px rgba(0, 160, 223, 0.22);

  /* Diagonal stripe — the brand's proprietary element */
  --byd-slash-angle: -12deg;     /* matches the Y in the logo */
  --byd-slash-width: 12px;       /* default thickness — keep delicate */
  --byd-slash-color: var(--byd-cyan);

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

/* =========================================================
   Semantic typography classes
   ========================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.byd-eyebrow {
  font-family: var(--font-cond);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--byd-cyan);
}

.byd-display, h1.byd, .byd-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--byd-navy);
  text-wrap: balance;
}

h2.byd, .byd-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--byd-navy);
  text-wrap: balance;
}

h3.byd, .byd-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--byd-navy);
}

h4.byd, .byd-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--byd-navy);
}

.byd-editorial {
  font-family: var(--font-editorial);
  font-weight: 400;            /* Regular — condensed but substantial */
  font-size: var(--fs-3xl);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--byd-navy);
  text-wrap: balance;
}

p.byd, .byd-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.byd-meta {
  font-family: var(--font-cond);
  font-weight: var(--fw-reg);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.byd-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* =========================================================
   The Diagonal Slash — proprietary brand element
   Use as a divider, accent, button stripe, hero block.
   ========================================================= */

.byd-slash {
  display: inline-block;
  width: var(--byd-slash-width);
  height: 1em;
  background: var(--byd-slash-color);
  transform: skewX(var(--byd-slash-angle));
  vertical-align: middle;
}

.byd-slash-divider {
  height: 3px;
  width: 56px;
  background: var(--byd-cyan);
  transform: skewX(var(--byd-slash-angle));
  border: 0;
  margin: var(--space-5) 0;
}

/* full-section diagonal cut */
.byd-section-cut-top {
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}
.byd-section-cut-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}