/*
 * VELYX approved light theme
 * ============================================================
 * The customer-approved homepage (docs/design/Main.dc.html) is a lighter
 * interpretation of the brand guide: blue-tinted surfaces, Intelligence Blue
 * as the primary accent, Sora / IBM Plex typography, and no dark mode.
 *
 * This file is the single place where that theme is expressed:
 *   - it loads after velyx-brand.css and velyx-bootstrap.css and overrides
 *     their tokens and component variables;
 *   - every derived colour is computed from the brand tokens with color-mix(),
 *     so changing a brand colour (later: from Site Settings) updates the theme.
 *
 * Contents
 *   1. Fonts                5. Buttons and links
 *   2. Theme tokens         6. Eyebrows and labels
 *   3. Light-only           7. Sections
 *   4. Typography
 */

/* ============================================================
   1. FONTS (self-hosted, see wwwroot/fonts/README.md)
   ============================================================ */

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/sora-latin-wght.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

/* ============================================================
   2. THEME TOKENS
   ============================================================ */

:root {
  --font-family-display: "Sora", "Segoe UI", Arial, sans-serif;
  --font-family-body: "IBM Plex Sans", system-ui, "Segoe UI", Arial, sans-serif;
  --font-family-monospace: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --font-size-base: 1.0625rem;

  /* Sections fading in on scroll (site.css .reveal): slower than UI feedback, eased out. */
  --transition-reveal: 600ms cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Accent: the configurable primary colour of the light theme. */
  --color-accent: var(--velyx-intelligence-blue);
  --color-accent-hover: var(--color-interactive-hover);
  --color-accent-active: var(--color-interactive-active);
  --color-on-accent: var(--velyx-white);

  /* Blue-tinted surfaces (mockup #F2F6FD, #EEF4FD, #EAF0FD, #E6EEFC, #DCE7FC). */
  --color-tint-subtle: color-mix(in srgb, var(--color-accent) 6%, var(--velyx-white));
  --color-tint: color-mix(in srgb, var(--color-accent) 8%, var(--velyx-white));
  --color-tint-medium: color-mix(in srgb, var(--color-accent) 10%, var(--velyx-white));
  --color-tint-strong: color-mix(in srgb, var(--color-accent) 11%, var(--velyx-white));
  --color-tint-highlight: color-mix(in srgb, var(--color-accent) 15%, var(--velyx-white));

  /* Teal-tinted surfaces (mockup #E7F6F8, #D8F1F4). Surfaces only. */
  --color-tint-teal: color-mix(in srgb, var(--velyx-mineral-teal) 10%, var(--velyx-white));
  --color-tint-teal-highlight: color-mix(in srgb, var(--velyx-mineral-teal) 15%, var(--velyx-white));

  /* Navy-tinted surface (mockup #EEF2FA). */
  --color-tint-navy: color-mix(in srgb, var(--velyx-architectural-navy) 6%, var(--color-tint-subtle));

  /* Borders (mockup #DCE5F5, #D5E0F2, #9FB4DD). */
  --color-border-tint-subtle: color-mix(in srgb, var(--color-accent) 9%, var(--velyx-white));
  --color-border-tint: color-mix(in srgb, var(--color-accent) 12%, var(--velyx-neutral-100));
  --color-border-control: color-mix(in srgb, var(--color-accent) 15%, var(--velyx-architecture-mist));

  /* Teal text: Mineral Teal darkened towards Midnight so it passes AA on
     white and tints (about 4.8:1 on --color-tint). Mineral Teal itself is
     never text on a light surface. */
  --color-text-teal: color-mix(in srgb, var(--velyx-mineral-teal) 65%, var(--velyx-midnight));

  --shadow-tint: 0 12px 32px color-mix(in srgb, var(--color-accent) 8%, transparent);
  --radius-card: 0.5rem;

  /* Bootstrap primary = accent in the light theme. */
  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 40, 100, 220;
  --bs-primary-text-emphasis: var(--color-accent-active);
  --bs-primary-bg-subtle: var(--color-tint);
  --bs-primary-border-subtle: var(--color-border-tint);

  color-scheme: light;
}

/* ============================================================
   3. LIGHT-ONLY
   ============================================================
   velyx-brand.css switches to dark tokens under prefers-color-scheme: dark.
   The approved design is light, so restore the light values. */

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--velyx-architectural-white);
    --color-background-alt: var(--velyx-neutral-100);
    --color-surface: var(--velyx-white);
    --color-surface-subtle: var(--velyx-neutral-100);
    --color-text: var(--velyx-midnight);
    --color-text-secondary: var(--velyx-graphite);
    --color-text-muted: var(--velyx-neutral-600);
    --color-text-inverse: var(--velyx-architectural-white);
    --color-text-link: var(--velyx-intelligence-blue);
    --color-border: var(--velyx-neutral-300);
    --color-border-subtle: var(--velyx-neutral-200);
    --color-border-strong: var(--velyx-neutral-500);
    --color-divider: var(--velyx-neutral-300);
  }

  html {
    color-scheme: light;
  }

  .velyx-card--architectural {
    border-top-color: var(--velyx-midnight);
  }

  .velyx-button--primary {
    background: var(--velyx-midnight);
    color: var(--velyx-architectural-white);
  }

  .velyx-button--primary:hover {
    background: var(--velyx-architectural-navy);
    color: var(--velyx-architectural-white);
  }

  .velyx-button--outline {
    border-color: var(--velyx-midnight);
    color: var(--velyx-midnight);
  }

  .velyx-button--outline:hover {
    background: var(--velyx-midnight);
    color: var(--velyx-architectural-white);
  }

  code {
    color: var(--velyx-architectural-navy);
  }
}

/* ============================================================
   4. TYPOGRAPHY (mockup scale)
   ============================================================ */

body {
  color: var(--color-text);
}

h1,
.h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

h2,
.h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h3,
.h3 {
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lead {
  color: var(--color-text-secondary);
  font-size: 1.1875rem;
  line-height: var(--line-height-body);
}

.font-mono {
  font-family: var(--font-family-monospace);
}

/* ============================================================
   5. BUTTONS AND LINKS
   ============================================================ */

.btn {
  --bs-btn-padding-x: 1.375rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-width: 1px;
  --bs-btn-border-radius: var(--radius-xs);
}

.btn-lg {
  --bs-btn-padding-x: 1.625rem;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-font-size: var(--font-size-base);
  --bs-btn-border-radius: var(--radius-xs);

  min-height: 52px;
}

.btn-sm {
  --bs-btn-font-size: 0.9375rem;
  --bs-btn-font-weight: var(--font-weight-medium);
  --bs-btn-border-radius: var(--radius-xs);
}

.btn-primary {
  --velyx-btn-fg: var(--color-on-accent);
  --velyx-btn-bg: var(--color-accent);
  --velyx-btn-hover-bg: var(--color-accent-hover);
  --velyx-btn-active-bg: var(--color-accent-active);
}

/* Secondary action of the mockup: white, light-blue border, dark text. */
.btn-outline-primary {
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: var(--color-surface);
  --bs-btn-border-color: var(--color-border-control);
  --bs-btn-font-weight: var(--font-weight-medium);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-tint);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-active-color: var(--color-text);
  --bs-btn-active-bg: var(--color-tint-highlight);
  --bs-btn-active-border-color: var(--color-accent);
  --bs-btn-disabled-color: var(--color-text);
  --bs-btn-disabled-bg: var(--color-surface);
  --bs-btn-disabled-border-color: var(--color-border-control);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--color-accent);
  --bs-nav-pills-link-active-color: var(--color-on-accent);
}

.pagination {
  --bs-pagination-active-bg: var(--color-accent);
  --bs-pagination-active-border-color: var(--color-accent);
  --bs-pagination-active-color: var(--color-on-accent);
}

.list-group {
  --bs-list-group-active-bg: var(--color-accent);
  --bs-list-group-active-border-color: var(--color-accent);
  --bs-list-group-active-color: var(--color-on-accent);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--color-accent);
  --bs-dropdown-link-active-color: var(--color-on-accent);
}

/* "Discuss an enterprise transformation →" style links. */
.link-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.link-cta:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ============================================================
   6. EYEBROWS AND LABELS
   ============================================================
   The brand eyebrow is Mineral Teal, which fails contrast on light
   surfaces. The approved design uses mono, accent-coloured eyebrows,
   and darkened teal on tinted sections. */

.velyx-eyebrow {
  display: block;
  margin-bottom: 0;
  color: var(--color-accent);
  font-family: var(--font-family-monospace);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.velyx-eyebrow--teal {
  color: var(--color-text-teal);
}

/* Small mono caption above or below a diagram. */
.velyx-caption {
  color: var(--color-text-muted);
  font-family: var(--font-family-monospace);
  font-size: 0.75rem;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   7. SECTIONS AND LAYOUT
   ============================================================ */

/* Fluid container as in the mockup: max 80rem, gutter 16–48px. */
.container {
  --bs-gutter-x: clamp(2rem, 8vw, 6rem);

  max-width: var(--content-max-width);
}

.velyx-section {
  padding-block: clamp(4rem, 8vw, 7rem);
  background: var(--color-surface);
}

.velyx-section--tint {
  border-block: 1px solid var(--color-border-tint);
  background: var(--color-tint);
}

.velyx-section--white {
  border-block: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.velyx-section:not(.velyx-section--tint):not(.velyx-section--white)
  + .velyx-section:not(.velyx-section--tint):not(.velyx-section--white) {
  border-top: 1px solid var(--color-border-tint-subtle);
  background: var(--color-tint-subtle);
}

.card {
  --bs-card-border-color: var(--color-border-subtle);
  --bs-card-border-radius: var(--radius-card);
  --bs-card-inner-border-radius: calc(var(--radius-card) - 1px);

  box-shadow: none;
}

/* Diagram panel: white card with the tinted shadow. */
.velyx-panel {
  padding: var(--space-5);
  border: 1px solid var(--color-border-tint);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-tint);
}

/* Reduced motion: Bootstrap already drops its own transitions (offcanvas, dropdown, collapse); this does the same
   for the theme's and site.css's hover lifts, underlines and fades, and turns off smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}