/* =========================================================
   SOUVENRA NEXUS — THEME SYSTEM
   Version: 2.0.0
   Modes: Dark / Light
   Default: Dark
   ========================================================= */
  /* theme
       ├── theme.css
       ├── theme.js
      └── theme.json */

      
:root {
  color-scheme: dark;

  --content-max-width: 1600px;
  --content-padding: 50px;
  --sn-content-width: var(--content-max-width);
  --sn-page-padding: var(--content-padding);

  /* =========================
     DARK MODE — DEFAULT
     ========================= */

  --sn-bg-primary: #05070B;
  --sn-bg-secondary: #080D16;
  --sn-bg-surface: #0B111C;
  --sn-bg-surface-alt: #0F1724;

  --sn-text-primary: #F5F7FA;
  --sn-text-secondary: #B8C0CC;
  --sn-text-muted: #7E8998;
  --sn-text-inverse: #05070B;

  --sn-accent-primary: #0A84FF;
  --sn-accent-secondary: #00B7FF;
  --sn-accent-hover: #2A96FF;
  --sn-accent-soft: rgba(10,132,255,0.14);
  --sn-accent-glow: rgba(10,132,255,0.35);

  --sn-border-default: #1B2635;
  --sn-border-strong: #26364A;
  --sn-border-accent: rgba(10,132,255,0.45);

  --sn-success: #22C55E;
  --sn-warning: #F59E0B;
  --sn-error: #EF4444;
  --sn-info: #0A84FF;

  --sn-header-bg: rgba(5,7,11,0.82);
  --sn-header-border: #1B2635;

  --sn-card-bg: #0B111C;
  --sn-card-shadow: 0 16px 50px rgba(0,0,0,0.28);

  --sn-input-bg: #080D16;

  --sn-hero-gradient:
    radial-gradient(
      circle at 75% 50%,
      rgba(10,132,255,0.18) 0%,
      rgba(5,7,11,0) 55%
    );

  --sn-accent-gradient:
    linear-gradient(135deg, #0A84FF 0%, #00B7FF 100%);

  --sn-surface-gradient:
    linear-gradient(180deg, #0B111C 0%, #080D16 100%);

  --sn-hero-overlay:
    linear-gradient(
      90deg,
      rgba(5,7,11,0.92) 0%,
      rgba(5,7,11,0.62) 42%,
      rgba(5,7,11,0.12) 100%
    );

  /* Typography */
  --sn-font-primary:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  --sn-heading-weight: 700;
  --sn-body-weight: 400;
  --sn-heading-letter-spacing: -0.03em;
  --sn-body-line-height: 1.65;

  /* Layout */
  --sn-section-spacing: 120px;
  --sn-container-radius: 20px;
  --sn-card-radius: 16px;
  --sn-button-radius: 10px;

  /* Motion */
  --sn-motion-fast: 150ms;
  --sn-motion-normal: 250ms;
  --sn-motion-slow: 450ms;
  --sn-easing: cubic-bezier(0.22,1,0.36,1);

  /* Backward compatibility */
  --bg-primary: var(--sn-bg-primary);
  --bg-secondary: var(--sn-bg-secondary);
  --bg-tertiary: var(--sn-bg-surface-alt);
  --text-primary: var(--sn-text-primary);
  --text-secondary: var(--sn-text-secondary);
  --text-dim: var(--sn-text-muted);
  --accent-start: var(--sn-accent-primary);
  --accent-end: var(--sn-accent-secondary);
  --shadow-accent: var(--sn-accent-soft);
  --accent: var(--sn-accent-primary);
}

/* =========================================================
   LIGHT MODE
   Activated by:
   <html data-theme="light">
   ========================================================= */

:root[data-theme="light"],
html.light-theme,
body.light-theme {
  color-scheme: light;

  --sn-bg-primary: #F7F9FC;
  --sn-bg-secondary: #EEF2F7;
  --sn-bg-surface: #FFFFFF;
  --sn-bg-surface-alt: #E8EEF5;

  --sn-text-primary: #0B1220;
  --sn-text-secondary: #344054;
  --sn-text-muted: #667085;
  --sn-text-inverse: #FFFFFF;

  --sn-accent-primary: #0878E8;
  --sn-accent-secondary: #009BD8;
  --sn-accent-hover: #0668C9;
  --sn-accent-soft: rgba(8,120,232,0.10);
  --sn-accent-glow: rgba(8,120,232,0.22);

  --sn-border-default: #DCE3EC;
  --sn-border-strong: #C7D1DE;
  --sn-border-accent: rgba(8,120,232,0.45);

  --sn-success: #16A34A;
  --sn-warning: #D97706;
  --sn-error: #DC2626;
  --sn-info: #0878E8;

  --sn-header-bg: rgba(255,255,255,0.86);
  --sn-header-border: #DCE3EC;

  --sn-card-bg: #FFFFFF;
  --sn-card-shadow: 0 16px 45px rgba(15,23,42,0.08);

  --sn-input-bg: #FFFFFF;

  --sn-hero-gradient:
    radial-gradient(
      circle at 75% 50%,
      rgba(8,120,232,0.12) 0%,
      rgba(247,249,252,0) 55%
    );

  --sn-accent-gradient:
    linear-gradient(135deg, #0878E8 0%, #009BD8 100%);

  --sn-surface-gradient:
    linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 100%);

  --sn-hero-overlay:
    linear-gradient(
      90deg,
      rgba(247,249,252,0.96) 0%,
      rgba(247,249,252,0.72) 42%,
      rgba(247,249,252,0.12) 100%
    );

  /* Keep old selectors working */
  --bg-primary: var(--sn-bg-primary);
  --bg-secondary: var(--sn-bg-secondary);
  --bg-tertiary: var(--sn-bg-surface-alt);
  --text-primary: var(--sn-text-primary);
  --text-secondary: var(--sn-text-secondary);
  --text-dim: var(--sn-text-muted);
  --accent-start: var(--sn-accent-primary);
  --accent-end: var(--sn-accent-secondary);
  --shadow-accent: var(--sn-accent-soft);
  --accent: var(--sn-accent-primary);
}

/* =========================================================
   GLOBAL FOUNDATION
   ========================================================= */

html {
  background: var(--sn-bg-primary);
  color: var(--sn-text-primary);
  transition:
    background-color var(--sn-motion-normal) var(--sn-easing),
    color var(--sn-motion-normal) var(--sn-easing);
}

body {
  margin: 0;
  background: var(--sn-bg-primary);
  color: var(--sn-text-primary);
  font-family: var(--sn-font-primary);
  font-weight: var(--sn-body-weight);
  line-height: var(--sn-body-line-height);
  transition:
    background-color var(--sn-motion-normal) var(--sn-easing),
    color var(--sn-motion-normal) var(--sn-easing);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sn-text-primary);
  font-weight: var(--sn-heading-weight);
  letter-spacing: var(--sn-heading-letter-spacing);
}

p {
  color: var(--sn-text-secondary);
}

a {
  color: inherit;
}

::selection {
  background: var(--sn-accent-primary);
  color: #FFFFFF;
}

:focus-visible {
  outline: 2px solid var(--sn-accent-primary);
  outline-offset: 3px;
}

/* =========================================================
   REUSABLE DESIGN TOKENS / COMPONENT HELPERS
   ========================================================= */

.sn-container {
  width: min(
    calc(100% - (var(--sn-page-padding) * 2)),
    var(--sn-content-width)
  );
  margin-inline: auto;
}

.sn-surface {
  background: var(--sn-bg-surface);
  border: 1px solid var(--sn-border-default);
  border-radius: var(--sn-container-radius);
}

.sn-card {
  background: var(--sn-card-bg);
  border: 1px solid var(--sn-border-default);
  border-radius: var(--sn-card-radius);
  box-shadow: var(--sn-card-shadow);
  transition:
    border-color var(--sn-motion-normal) var(--sn-easing),
    box-shadow var(--sn-motion-normal) var(--sn-easing),
    transform var(--sn-motion-normal) var(--sn-easing);
}

.sn-card:hover {
  border-color: var(--sn-border-accent);
}

.sn-button-primary {
  background: var(--sn-accent-primary);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--sn-button-radius);
  box-shadow: 0 10px 30px var(--sn-accent-glow);
  transition:
    background var(--sn-motion-normal) var(--sn-easing),
    box-shadow var(--sn-motion-normal) var(--sn-easing),
    transform var(--sn-motion-normal) var(--sn-easing);
}

.sn-button-primary:hover {
  background: var(--sn-accent-hover);
}

.sn-button-secondary {
  background: transparent;
  color: var(--sn-text-primary);
  border: 1px solid var(--sn-border-strong);
  border-radius: var(--sn-button-radius);
  transition:
    border-color var(--sn-motion-normal) var(--sn-easing),
    background-color var(--sn-motion-normal) var(--sn-easing);
}

.sn-button-secondary:hover {
  border-color: var(--sn-border-accent);
  background: var(--sn-accent-soft);
}

.sn-input {
  background: var(--sn-input-bg);
  color: var(--sn-text-primary);
  border: 1px solid var(--sn-border-strong);
  border-radius: var(--sn-button-radius);
  transition:
    border-color var(--sn-motion-normal) var(--sn-easing),
    box-shadow var(--sn-motion-normal) var(--sn-easing);
}

.sn-input::placeholder {
  color: var(--sn-text-muted);
}

.sn-input:focus {
  border-color: var(--sn-accent-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--sn-accent-soft);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
  :root {
    --content-padding: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --content-padding: 16px;
    --sn-section-spacing: 80px;
  }
}

@media (max-width: 640px) {
  :root {
    --content-padding: 14px;
    --sn-section-spacing: 64px;
  }
}

/* =========================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}