/* ==========================================================================
   Theme — Signal
   Navy and silicon. Built from the OplosCore logo: deep navy #003c66 (the head
   fill), shadow navy #001842 (the shield) and bright blue #2484c6 (the brain
   trace). A light page carries a navy hero band and a navy footer, with a
   circuit-trace motif drawn from the processor in the logo mark.

   This file defines the visual identity only. All layout and structure lives
   in base.css and is shared by every theme. To switch theme, change
   SITE_THEME in .env — see static/css/themes/README.md.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
  --font-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Surfaces — a cool, near-white page */
  --color-bg: #fbfcfe;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f8fc;
  --color-border: #e4ebf3;
  --color-border-strong: #cfdbe8;

  /* Type */
  --color-heading: #0a1f36;
  --color-text: #48607a;
  --color-text-muted: #71879e;
  --color-link: #2484c6;

  /* Brand */
  --color-accent: #2484c6;
  --color-accent-contrast: #ffffff;

  /* Navy is the button and the ground; blue is the accent */
  --btn-primary-bg: #003c66;
  --btn-glow: 0 4px 14px rgba(0, 60, 102, 0.22);

  --header-bg: rgba(251, 252, 254, 0.9);
  --dropdown-bg: #ffffff;
  --nav-hover-bg: rgba(36, 132, 198, 0.08);
  --footer-bg: #001842;
  --cta-bg: linear-gradient(150deg, #00406e 0%, #001428 100%);

  /* Navy hero band with a circuit trace drawn over the gradient */
  --hero-bg:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1200'%20height='700'%20viewBox='0%200%201200%20700'%20fill='none'%3E%3Cg%20stroke='%235fb0e8'%20stroke-width='1'%20opacity='0.2'%3E%3Cpath%20d='M0%2090h120l34%2034v150l30%2030h110M0%20480h150l40-40V300l34-34h110M1200%20120h-140l-34%2034v140l-30%2030h-90M1200%20520h-160l-40-40V330'/%3E%3C/g%3E%3Cg%20fill='%235fb0e8'%20opacity='0.45'%3E%3Ccircle%20cx='294'%20cy='304'%20r='3'/%3E%3Ccircle%20cx='334'%20cy='266'%20r='3'/%3E%3Ccircle%20cx='906'%20cy='324'%20r='3'/%3E%3Ccircle%20cx='1000'%20cy='330'%20r='3'/%3E%3C/g%3E%3C/svg%3E")
      center / cover no-repeat,
    radial-gradient(circle at 88% 8%, rgba(36, 132, 198, 0.42), transparent 58%),
    linear-gradient(155deg, #00406e 0%, #002a4d 45%, #001428 100%);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --btn-radius: 9px;
  --mark-radius: 6px;

  --shadow-md: 0 6px 20px rgba(10, 31, 54, 0.07);
  --shadow-lg: 0 16px 40px rgba(10, 31, 54, 0.14);

  --icon-bg: #eef5fb;
  --pill-bg: #ffffff;

  /* Form states */
  --focus-ring: rgba(36, 132, 198, 0.22);
  --color-error: #b3261e;
  --color-success: #1a7f5a;
}

/* --------------------------------------------------------------------------
   Navy hero bands — the landing hero and the smaller interior page hero both
   sit on --hero-bg, so their type must invert.
   -------------------------------------------------------------------------- */
.hero,
.page-hero {
  border-bottom: 1px solid var(--color-border);
}

.hero__eyebrow,
.page-hero__eyebrow {
  color: #7ec2f0;
  letter-spacing: 0.12em;
}

.hero__title,
.page-hero__title {
  color: #ffffff;
  letter-spacing: -0.028em;
}

.hero__lede,
.page-hero__lede {
  color: #a5c4dd;
}

/* Navy button on a navy band would disappear — use the bright accent */
.hero .btn--primary,
.page-hero .btn--primary {
  background: var(--color-accent);
  color: #00182e;
  box-shadow: 0 4px 16px rgba(36, 132, 198, 0.3);
}

.hero .btn--ghost,
.page-hero .btn--ghost {
  color: #ffffff;
  border-color: rgba(122, 186, 236, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover {
  border-color: #7ec2f0;
  color: #7ec2f0;
}

/* --------------------------------------------------------------------------
   Service icons — the processor from the logo mark, one glyph per service
   -------------------------------------------------------------------------- */
.card__icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.35rem 1.35rem;
  opacity: 1;
}

.card__icon--globe {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23003c66'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Crect%20x='2.5'%20y='4'%20width='19'%20height='15'%20rx='2'/%3E%3Cpath%20d='M2.5%208.5h19M6%206.2h.01M8.6%206.2h.01'/%3E%3C/svg%3E");
}

.card__icon--database {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23003c66'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Cellipse%20cx='12'%20cy='5.5'%20rx='7.5'%20ry='3'/%3E%3Cpath%20d='M4.5%205.5v13c0%201.7%203.4%203%207.5%203s7.5-1.3%207.5-3v-13M4.5%2012c0%201.7%203.4%203%207.5%203s7.5-1.3%207.5-3'/%3E%3C/svg%3E");
}

.card__icon--spark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23003c66'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Crect%20x='7'%20y='7'%20width='10'%20height='10'%20rx='2'/%3E%3Cpath%20d='M10%204v3M14%204v3M10%2017v3M14%2017v3M4%2010h3M4%2014h3M17%2010h3M17%2014h3'/%3E%3C/svg%3E");
}

.card__icon--flow {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23003c66'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Cpath%20d='M20%2011a8%208%200%201%200-2.3%206'/%3E%3Cpath%20d='M20%204v7h-7'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Cards — no coloured top rule; the icon carries the accent
   -------------------------------------------------------------------------- */
.card__title {
  letter-spacing: -0.015em;
}

.section__title {
  letter-spacing: -0.028em;
}

.stat__value {
  color: var(--color-heading);
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   Dark CTA band with light text
   -------------------------------------------------------------------------- */
.cta .cta__title {
  color: #ffffff;
}

.cta .cta__lede {
  color: #9dbcd6;
}

/* Navy button on a navy band would disappear — use the bright accent */
.cta .btn--primary {
  background: var(--color-accent);
  color: #00182e;
  box-shadow: 0 4px 16px rgba(36, 132, 198, 0.3);
}

/* --------------------------------------------------------------------------
   Navy footer needs light text
   -------------------------------------------------------------------------- */
.site-footer {
  color: #9dbcd6;
  border-top-color: transparent;
}

.site-footer .brand__name,
.site-footer__list a {
  color: #eaf3fb;
}

.site-footer__tagline,
.site-footer__heading,
.site-footer__bottom {
  color: #7fa2c0;
}

.site-footer__bottom {
  border-top-color: rgba(122, 186, 236, 0.18);
}

.site-footer__list a:hover {
  color: #7ec2f0;
}