/* ============================================================
   Unilog Design System — colors_and_type.css
   Core tokens (colors + typography) for the Unilog brand.
   ============================================================ */

/* -------- Fonts --------
 * Primary: Avenir Next — shipped locally.
 *   Regular (400) + Italic  — body copy, lead, descriptions, captions
 *   Demi Bold (600) + Italic — every heading, subheading, eyebrow, button
 * Weights 500 and 700 are synthesised by the browser if requested; stick to
 * 400 and 600 in source to map 1:1 to the shipped files.
 */
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-DemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/* Secondary UI face used sparingly in dense product chrome */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors (Unilog Blue) ---------- */
  --blue-ultra-light: #F2F6FA;   /* oklch(0.97 0.006 ~250) */
  --blue-light:       #BBD8F7;
  --blue-semi-light:  #5FA3EC;   /* Figma rgb(89,177,248) ~ 5FB1F8 also in use */
  --blue:             #3289E7;   /* PRIMARY */
  --blue-medium:      #1B7CE4;
  --blue-semi-dark:   #1357A0;
  --blue-dark:        #0D3E72;
  --blue-ultra-dark:  #082544;

  /* ---------- Brand colors (Unilog Yellow) ---------- */
  --yellow-ultra-light: #FEF7E6;
  --yellow-light:       #FDE6B4;
  --yellow:             #FBC756;  /* SECONDARY / accent on dark */
  --yellow-semi-dark:   #F9AC06;
  --yellow-medium:      #F9AC06;  /* alias, for existing usages */

  /* ---------- Neutrals ---------- */
  --white:             #FFFFFF;
  --neutral-ultra-light: #F2F2F2;
  --neutral-light:       #D9D9D9;
  --neutral-semi-light:  #A6A6A6;
  --neutral-semi-dark:   #595959;
  --neutral-dark:        #242424;
  --neutral-ultra-dark:  #171717;
  /* legacy aliases */
  --gray-50:  #FAFAFA;
  --gray-100: #F2F2F2;
  --gray-200: #D9D9D9;
  --gray-300: #BFBFBF;
  --gray-400: #A6A6A6;
  --gray-500: #808080;
  --gray-600: #595959;
  --gray-700: #404040;
  --gray-800: #262626;
  --dark-gray:   #242424;
  --ultra-dark:  #171717;
  --near-black:  #171717;
  --black:       #000000;

  /* ---------- Semantic (functional) ---------- */
  --success: #18B26B;
  --warning: #F9AC06;   /* == yellow-medium */
  --danger:  #D80027;   /* from figma palette rgb(216,0,39) */
  --info:    var(--blue);

  /* ---------- Foreground / background shortcuts ---------- */
  --fg-primary:   var(--ultra-dark);
  --fg-secondary: var(--gray-600);
  --fg-muted:     var(--gray-500);
  --fg-inverse:   var(--white);
  --fg-link:      var(--blue);
  --fg-accent:    var(--blue);

  --bg-page:      var(--white);
  --bg-subtle:    var(--gray-50);
  --bg-muted:     var(--gray-100);
  --bg-dark:      var(--near-black);
  --bg-darker:    var(--ultra-dark);
  --bg-brand:     var(--blue);
  --bg-brand-dark: var(--blue-ultra-dark);

  /* Dark hero gradient — the Unilog signature background */
  --bg-hero-dark: radial-gradient(1200px 800px at 75% 30%, rgba(50,137,231,0.35), transparent 60%),
                  linear-gradient(180deg, #0A1B2E 0%, #050B17 100%);
  --bg-hero-blue: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-ultra-dark) 100%);

  --border-subtle: rgba(0,0,0,0.08);
  --border-default: rgba(0,0,0,0.12);
  --border-strong: rgba(0,0,0,0.24);
  --border-on-dark: rgba(255,255,255,0.12);

  /* ---------- Type families ---------- */
  --font-sans: "Avenir Next", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui:   "Inter", "Avenir Next", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (brand guideline) ---------- */
  --fs-display: 80px;  /* oversized hero */
  --fs-h1: 64px;       /* ~64-65 per guide */
  --fs-h2: 48px;       /* ~48-50 */
  --fs-h3: 32px;       /* ~32-35 */
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;
  --fs-body-xl: 22px;
  --fs-body-lg: 19px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-eyebrow: 13px;
  --fs-micro: 12px;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --lh-loose: 1.65;

  /* Tracking */
  --ls-eyebrow: 0.14em;
  --ls-heading: -0.01em;
  --ls-display: -0.02em;

  /* Weights (Avenir Next: Regular 400, Medium 500, Demi Bold 600, Bold 700) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-demi: 600;
  --fw-bold: 700;

  /* ---------- Spacing scale ---------- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-s:   12px;
  --space-m:   16px;
  --space-l:   24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-section: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(9, 26, 50, 0.06);
  --shadow-s:  0 2px 6px rgba(9, 26, 50, 0.08);
  --shadow-m:  0 8px 24px rgba(9, 26, 50, 0.10);
  --shadow-l:  0 20px 40px rgba(9, 26, 50, 0.14);
  --shadow-xl: 0 32px 80px rgba(9, 26, 50, 0.18);
  --shadow-glow-blue: 0 0 0 4px rgba(50,137,231,0.18);

  /* ---------- Widths / containers ---------- */
  --container: 1200px;
  --container-wide: 1440px;
  --container-narrow: 880px;
  --content-reading: 680px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* ============================================================
   Base + semantic element mapping
   ============================================================ */
html { font-size: 16px; }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-demi);
  color: var(--fg-primary);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p  { margin: 0; line-height: var(--lh-body); text-wrap: pretty; }
a  { color: var(--fg-link); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--blue-medium); }

strong, b { font-weight: var(--fw-demi); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-demi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}
.lead { font-size: var(--fs-body-xl); line-height: var(--lh-snug); color: var(--fg-secondary); }

/* Highlighted keyword in headings — per brand guide */
.hl, .highlight { color: var(--blue); }
.on-dark .hl, .on-dark .highlight { color: var(--yellow); }
.on-dark { color: var(--fg-inverse); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5, .on-dark h6 { color: var(--fg-inverse); }


/* ============================================================
   v2 — Language system (added from Brand Guide refinement)
   ============================================================ */

/* Suppress synthesised weights/italics so 500 and 700 never render
   as a fake-bold of Demi. With four real cuts shipped, only 400/600
   should appear in source. */
body { font-synthesis: none; }
* { font-synthesis-weight: none; }

/* ---------- Eyebrow capsule (chevron) ---------- */
.eyebrow-capsule {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--neutral-ultra-dark);
  background: var(--white);
  color: var(--blue);
  font-family: var(--font-sans);
  font-weight: var(--fw-demi);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eyebrow-capsule::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  /* Optically center on uppercase cap-height (Avenir Next caps sit above the
     line-box midpoint, so nudge the glyph up ~1px). */
  transform: translateY(-1px);
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center/contain no-repeat;
}
.on-dark .eyebrow-capsule {
  color: var(--white);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
}
.on-dark .eyebrow-capsule::before { background: var(--yellow); }

/* ---------- Section title pattern ---------- */
.section-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-demi);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--fg-primary);
  text-wrap: balance;
}
.on-dark .section-title { color: var(--white); }

.section-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
  max-width: 56ch;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.on-dark .section-lede { color: rgba(255,255,255,0.72); }

/* ---------- "Use when" pattern ---------- */
.use-when {
  display: block;
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  color: var(--fg-secondary);
}
.use-when::before {
  content: "USE WHEN";
  display: block;
  font-weight: var(--fw-demi);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--blue);
  margin-bottom: 6px;
}
.on-dark .use-when { border-top-color: var(--border-on-dark); color: rgba(255,255,255,0.72); }
.on-dark .use-when::before { color: var(--yellow); }

.use-when-inline strong {
  font-weight: var(--fw-demi);
  color: var(--blue);
  letter-spacing: 0.04em;
}
.on-dark .use-when-inline strong { color: var(--yellow); }

/* ---------- Watch-list ---------- */
.watch-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.watch-list li {
  list-style: none;
  padding-left: 22px;
  position: relative;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  color: var(--fg-secondary);
}
.watch-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 45%, var(--danger) 46%, var(--danger) 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--danger) 46%, var(--danger) 54%, transparent 55%);
}
.watch-list li strong { color: var(--fg-primary); font-weight: var(--fw-demi); }
.on-dark .watch-list li { color: rgba(255,255,255,0.72); }
.on-dark .watch-list li strong { color: var(--white); }

/* ---------- Tagline block ---------- */
.tagline-block {
  background:
    radial-gradient(600px 300px at 78% 0%, rgba(50,137,231,0.35), transparent 60%),
    linear-gradient(180deg, #0A1B2E 0%, #050B17 100%);
  color: var(--white);
  border-radius: var(--radius-l);
  padding: var(--space-xl) var(--space-xl) var(--space-l);
}
.tagline-block .lbl {
  font-family: var(--font-sans);
  font-weight: var(--fw-demi);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 var(--space-m);
  display: block;
}
.tagline-block .tag {
  font-family: var(--font-sans);
  font-weight: var(--fw-demi);
  font-size: 44px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-m);
  color: var(--white);
}
.tagline-block .tag em { font-style: normal; color: var(--yellow); }
.tagline-block p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: rgba(255,255,255,0.72);
  margin: 0;
}

/* ---------- Messaging pillar ---------- */
.msg-pillar {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-m);
  align-items: start;
}
.msg-pillar + .msg-pillar { margin-top: var(--space-m); }
.msg-pillar .num {
  font-family: var(--font-sans);
  font-weight: var(--fw-demi);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue);
}
.msg-pillar h4 {
  font-size: var(--fs-h5);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.msg-pillar .core {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
  margin: 0;
}