/* =====================================================================
   THEMES  -  colors, fonts and shapes for each look
   ---------------------------------------------------------------------
   The active theme is chosen in site-settings.js (theme: "...").
   Every page shares the same layout (css/styles.css); a theme only
   changes the values below.

   Token guide
     --bg, --bg-alt ........ page and alternate section backgrounds
     --text, --heading ..... body text and heading colors
     --muted ............... secondary text
     --border(-strong) ..... lines and card outlines
     --page-link ........... links on normal sections
     --accent .............. buttons and highlights
     --accent-ink .......... text on top of --accent
     --band-* .............. the same set for dark "band" sections
                             (hero, highlighted sections, footer)
     --header-* ............ top bar
     --art-* ............... network diagram colors
   ===================================================================== */

/* ---------- Fonts (self-hosted; only the active theme's files load) ---------- */
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-600.woff") format("woff"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("../assets/fonts/inter-display-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
/* "SecureByte Serif" is a subset of Lora (SIL OFL 1.1), renamed as the license requires for modified copies. */
@font-face { font-family: "SecureByte Serif"; src: url("../assets/fonts/serif-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }


/* =====================================================================
   1. SIGNAL ORANGE  (default)
   Black and graphite bands, crisp white type, an orange signal accent.
   The look of large enterprise security vendors.
   ===================================================================== */
:root,
[data-theme="signal"] {
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-weight: 800;
  --heading-tracking: -0.022em;
  --heading-line: 1.05;
  --h3-font: var(--font-body);
  --h3-weight: 600;
  --h3-tracking: -0.01em;
  --h1-home: 3.7rem;
  --hero-ratio: 11.2;
  --h1: clamp(2.3rem, 1.5rem + 3vw, 3.6rem);
  --h2: clamp(1.9rem, 1.35rem + 1.9vw, 2.9rem);

  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-button: 3px;

  --bg: #FFFFFF;
  --bg-alt: #F2F3F5;
  --surface: #FFFFFF;
  --surface-2: #F7F7F8;
  --text: #1B1D21;
  --heading: #0E0F11;
  --muted: #5A5F69;
  --border: #E1E3E7;
  --border-strong: #C4C8CF;
  --page-link: #B93D0A;

  --accent: #FF6B1A;
  --accent-ink: #141110;
  --accent-hover: #FF8A47;
  --accent-2: #FF6B1A;

  --band-bg: #121417;
  --band-bg-2: #1A1D21;
  --band-surface: #1D2025;
  --band-text: #E6E7EA;
  --band-heading: #FFFFFF;
  --band-muted: #A3A8B1;
  --band-border: #2E3238;
  --band-border-strong: #4A4F57;
  --band-link: #FF8A47;

  --header-bg: #0E1013;
  --header-text: #F1F2F4;
  --header-muted: #B9BDC5;
  --header-border: #23262B;

  --art-line: #3A3F47;
  --art-chip: #1A1D21;
  --art-chip-stroke: #3F444C;
  --art-text: #E6E7EA;
  --art-icon: #A3A8B1;
  --art-tag: #121417;
  --art-muted: #A3A8B1;
  --art-bg: #121417;
  --chip-rx: 4px;

  --card-shadow: none;
  --focus: #FF8A47;
  --section-pad: clamp(64px, 8vw, 112px);
  color-scheme: light;
}


/* =====================================================================
   2. MIDNIGHT BLUE
   Deep navy throughout, cyan accents, network-map graphics.
   ===================================================================== */
[data-theme="midnight"] {
  --font-heading: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-weight: 500;
  --heading-tracking: -0.015em;
  --heading-line: 1.14;
  --h3-font: var(--font-heading);
  --h3-weight: 500;
  --h3-tracking: -0.005em;
  --h1-home: 3.5rem;
  --hero-ratio: 11.9;
  --h1: clamp(2.2rem, 1.5rem + 2.6vw, 3.3rem);
  --h2: clamp(1.8rem, 1.35rem + 1.6vw, 2.6rem);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-button: 999px;

  --bg: #0B1626;
  --bg-alt: #0E1B2F;
  --surface: #11223A;
  --surface-2: #142844;
  --text: #D5DFEC;
  --heading: #F3F7FC;
  --muted: #93A4BD;
  --border: #1E3352;
  --border-strong: #2E4A72;
  --page-link: #5FD8F2;

  --accent: #2CC8E8;
  --accent-ink: #04121F;
  --accent-hover: #63DAF2;
  --accent-2: #2CC8E8;

  --band-bg: #07101D;
  --band-bg-2: #0A1526;
  --band-surface: #0F1D33;
  --band-text: #D5DFEC;
  --band-heading: #F3F7FC;
  --band-muted: #93A4BD;
  --band-border: #1A2C47;
  --band-border-strong: #2E4A72;
  --band-link: #5FD8F2;

  --header-bg: #07101D;
  --header-text: #EAF1F9;
  --header-muted: #A9B8CC;
  --header-border: #16253D;

  --art-line: #23406A;
  --art-chip: #0F1D33;
  --art-chip-stroke: #2E4A72;
  --art-text: #E3EAF4;
  --art-icon: #93A4BD;
  --art-tag: #07101D;
  --art-muted: #93A4BD;
  --art-bg: #0A1526;
  --chip-rx: 22px;

  --card-shadow: none;
  --focus: #63DAF2;
  color-scheme: dark;
}


/* =====================================================================
   3. CLEAN CORPORATE
   White and light gray, navy serif headlines, restrained blue.
   ===================================================================== */
[data-theme="corporate"] {
  --font-heading: "SecureByte Serif", Georgia, Cambria, "Times New Roman", serif;
  --heading-weight: 600;
  --heading-tracking: -0.005em;
  --heading-line: 1.16;
  --h3-font: var(--font-body);
  --h3-weight: 600;
  --h3-tracking: -0.01em;
  --h1-home: 3.6rem;
  --hero-ratio: 11.7;
  --h1: clamp(2.1rem, 1.45rem + 2.4vw, 3.2rem);
  --h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-button: 4px;

  --bg: #FFFFFF;
  --bg-alt: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --text: #1E293B;
  --heading: #0B2545;
  --muted: #526077;
  --border: #DCE3EC;
  --border-strong: #B9C6D6;
  --page-link: #1D4ED8;

  --accent: #1D4ED8;
  --accent-ink: #FFFFFF;
  --accent-hover: #1E40AF;
  --accent-2: #1D4ED8;

  --band-bg: #0B2545;
  --band-bg-2: #0F2D52;
  --band-surface: #13335C;
  --band-text: #E2E8F0;
  --band-heading: #FFFFFF;
  --band-muted: #A9B8CC;
  --band-border: #23436B;
  --band-border-strong: #3B5C86;
  --band-link: #9DBCFF;

  --header-bg: #FFFFFF;
  --header-text: #0B2545;
  --header-muted: #526077;
  --header-border: #E3E8EF;

  --art-line: #BFCADA;
  --art-chip: #FFFFFF;
  --art-chip-stroke: #BFCADA;
  --art-text: #0B2545;
  --art-icon: #1D4ED8;
  --art-tag: #F4F6F9;
  --art-muted: #526077;
  --art-bg: #F4F6F9;
  --chip-rx: 6px;

  --card-shadow: 0 1px 2px rgba(11, 37, 69, 0.06);
  --focus: #1D4ED8;
  --section-pad: clamp(72px, 9vw, 128px);
  color-scheme: light;
}

/* Corporate keeps its hero light instead of dark. */
[data-theme="corporate"] .hero {
  --band-bg: #F4F6F9;
  --band-bg-2: #EDF1F6;
  --band-surface: #FFFFFF;
  --band-text: #1E293B;
  --band-heading: #0B2545;
  --band-muted: #526077;
  --band-border: #DCE3EC;
  --band-border-strong: #B9C6D6;
  --band-link: var(--page-link);
  --art-tag: #F4F6F9;
}


/* =====================================================================
   4. MODERN TECH
   Light sections and ink-dark bands, bold geometric headlines,
   violet accent with teal highlights.
   ===================================================================== */
[data-theme="modern"] {
  --font-heading: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --heading-weight: 700;
  --heading-tracking: -0.025em;
  --heading-line: 1.07;
  --h3-font: var(--font-heading);
  --h3-weight: 700;
  --h3-tracking: -0.015em;
  --h1-home: 3.45rem;
  --hero-ratio: 12.2;
  --h1: clamp(2.2rem, 1.5rem + 2.8vw, 3.5rem);
  --h2: clamp(1.85rem, 1.35rem + 1.8vw, 2.75rem);

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-button: 10px;

  --bg: #FFFFFF;
  --bg-alt: #F4F4F8;
  --surface: #FFFFFF;
  --surface-2: #F8F8FB;
  --text: #1F1E36;
  --heading: #13122B;
  --muted: #585775;
  --border: #E4E3EE;
  --border-strong: #C9C7DB;
  --page-link: #4B32D6;

  --accent: #5B3DF5;
  --accent-ink: #FFFFFF;
  --accent-hover: #4A2DE0;
  --accent-2: #14B8A6;

  --band-bg: #13122B;
  --band-bg-2: #1A1840;
  --band-surface: #1F1D48;
  --band-text: #E4E3F3;
  --band-heading: #FFFFFF;
  --band-muted: #ABA9CF;
  --band-border: #2E2B5E;
  --band-border-strong: #4A4688;
  --band-link: #5EEAD4;

  --header-bg: #FFFFFF;
  --header-text: #13122B;
  --header-muted: #585775;
  --header-border: #ECEBF3;

  --art-line: #3A3770;
  --art-chip: #1F1D48;
  --art-chip-stroke: #4A4688;
  --art-text: #F1F0FA;
  --art-icon: #5EEAD4;
  --art-tag: #13122B;
  --art-muted: #ABA9CF;
  --art-bg: #13122B;
  --chip-rx: 12px;

  --card-shadow: 0 1px 2px rgba(19, 18, 43, 0.05), 0 8px 24px rgba(19, 18, 43, 0.05);
  --focus: #5B3DF5;
  color-scheme: light;
}


/* =====================================================================
   THEME DETAILS
   Small per-theme touches on shared components: hero backgrounds,
   card treatments, numbered steps and highlighted bands.
   ===================================================================== */

/* ---- Signal Orange ---- */
[data-theme="signal"] .hero {
  background-image:
    radial-gradient(60% 85% at 100% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
[data-theme="signal"] .card { border-radius: 0; border-top: 3px solid var(--accent); }
[data-theme="signal"] .card__icon { border-radius: 0; background: var(--band-bg); color: var(--accent); }
[data-theme="signal"] .benefit { border-top-width: 3px; }
[data-theme="signal"] .step__num { border: 0; border-radius: 0; background: var(--accent); color: var(--accent-ink); }
[data-theme="signal"] .runbook { border-radius: 0; }
[data-theme="signal"] .cta {
  background-image: radial-gradient(55% 120% at 100% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%);
  border-top: 3px solid var(--accent);
}

/* ---- Midnight Blue ---- */
[data-theme="midnight"] .hero {
  background-image:
    radial-gradient(55% 70% at 88% 12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(147, 164, 189, 0.16) 1px, transparent 1.6px);
  background-size: auto, 22px 22px;
}
[data-theme="midnight"] .site-header { background: color-mix(in srgb, var(--header-bg) 92%, transparent); backdrop-filter: blur(10px); }
[data-theme="midnight"] .card { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-alt) 100%); }
[data-theme="midnight"] .card__icon { border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
[data-theme="midnight"] .benefit {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
[data-theme="midnight"] .benefit > .icon { color: var(--accent); }
[data-theme="midnight"] .cta {
  background-image: radial-gradient(60% 140% at 0% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  border-top: 1px solid var(--border);
}

/* ---- Clean Corporate ---- */
[data-theme="corporate"] .hero { border-bottom: 1px solid var(--border); }
[data-theme="corporate"] .hero__facts .icon { color: var(--accent); }
[data-theme="corporate"] .card__icon { background: #EAF0FD; color: var(--accent); }
[data-theme="corporate"] .benefit { border-top: 1px solid var(--border-strong); }
[data-theme="corporate"] .benefit > .icon { color: var(--accent); }
[data-theme="corporate"] .step__num { border: 0; background: var(--heading); color: #FFFFFF; }
[data-theme="corporate"] .band .step__num { background: #FFFFFF; color: var(--band-bg); }
[data-theme="corporate"] .runbook { box-shadow: 0 18px 44px rgba(11, 37, 69, 0.18); }

/* ---- Modern Tech ---- */
[data-theme="modern"] .hero {
  background-image: linear-gradient(135deg, #13122B 0%, #1A1745 58%, #241A5E 100%);
}
[data-theme="modern"] .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -340px;
  right: -300px;
  width: 920px;
  height: 920px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 58px, rgba(171, 169, 207, 0.14) 59px 60px);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  pointer-events: none;
}
[data-theme="modern"] .hero__facts .icon { color: var(--accent-2); }
[data-theme="modern"] .card { position: relative; overflow: hidden; }
[data-theme="modern"] .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
[data-theme="modern"] .card__icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  color: var(--accent);
}
[data-theme="modern"] .benefit { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--accent), var(--accent-2)) 1; }
[data-theme="modern"] .step__num {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--accent-2)));
  color: #FFFFFF;
}
[data-theme="modern"] .feature > .icon { color: var(--accent-2); }
[data-theme="modern"] .cta { background-image: linear-gradient(120deg, #2A1F7A 0%, #13122B 62%); }
/* Violet is too dark to read on the ink hero, so the diagram uses teal. */
[data-theme="modern"] .stack { --stack-flow: var(--accent-2); --stack-key: var(--accent-2); }
[data-theme="modern"] .netmap .flow { stroke: var(--accent-2); }
[data-theme="modern"] .netmap .flow--alt { stroke: #B3A6FF; }
[data-theme="modern"] .netmap .chip--key .chip-bg { stroke: var(--accent-2); }
[data-theme="modern"] .netmap .chip--key .chip-icon { color: var(--accent-2); }