/* ==========================================================================
   Octivra Technologies — Design Tokens
   Single source of truth for color, type, spacing, radius, elevation, motion.
   Components consume *semantic* tokens (--color-*) so they adapt to:
     - the light / dark site theme ([data-theme] on <html>, or the OS setting)
     - always-dark "inverse" surfaces (.theme-inverse), e.g. hero, header, footer
   ========================================================================== */

:root {
  /* ---- Brand palette (fixed) ---------------------------------------- */
  --brand-navy: #0B1729;
  --brand-deep: #07111F;
  --brand-cyan: #31C7D5;
  --brand-blue: #527BFF;
  --brand-white: #F7F9FC;
  --brand-muted: #98A6BA;

  /* ---- Extended scales ------------------------------------------------ */
  --navy-975: #040A14;
  --navy-950: #060E1A;
  --navy-900: #07111F;
  --navy-850: #0B1729;
  --navy-800: #0F1E34;
  --navy-750: #13253F;
  --navy-700: #1A2E4C;
  --navy-600: #253B5C;
  --navy-500: #3A5072;

  --slate-25: #FBFCFE;
  --slate-50: #F7F9FC;
  --slate-100: #EEF2F7;
  --slate-150: #E6EBF2;
  --slate-200: #DCE3EC;
  --slate-300: #C3CDDA;
  --slate-400: #98A6BA;
  --slate-500: #6B7A90;
  --slate-600: #4F5E75;
  --slate-700: #37455B;
  --slate-800: #222F43;

  --cyan-200: #B5EEF2;
  --cyan-300: #7FE0E8;
  --cyan-400: #31C7D5;
  --cyan-500: #19AEBD;
  --cyan-600: #0E95A2;
  --cyan-700: #0B7782;   /* AA text on white */

  --blue-200: #C7D4FF;
  --blue-300: #9DB4FF;
  --blue-400: #7E9BFF;
  --blue-500: #527BFF;
  --blue-600: #3A5FE6;   /* AA text on white */
  --blue-700: #2E4BC4;

  --green-400: #3DD6A3;
  --green-700: #0E7A57;
  --amber-400: #F5B94A;
  --amber-700: #8A5A00;
  --red-400: #FF7A85;
  --red-700: #B42335;

  /* ---- Typography ------------------------------------------------------ */
  --font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;                                   /* 11px */
  --text-xs: 0.75rem;                                      /* 12px */
  --text-sm: 0.875rem;                                     /* 14px */
  --text-base: 1rem;                                       /* 16px */
  --text-md: 1.0625rem;                                    /* 17px */
  --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17–19px */
  --text-xl: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);  /* 19–22px */
  --text-2xl: clamp(1.375rem, 1.22rem + 0.6vw, 1.75rem);   /* 22–28px */
  --text-3xl: clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem);   /* 28–38px */
  --text-4xl: clamp(2rem, 1.55rem + 1.9vw, 3.125rem);      /* 32–50px */
  --text-5xl: clamp(2.5rem, 1.7rem + 3.3vw, 4.375rem);     /* 40–70px */

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.6;
  --leading-relaxed: 1.72;

  --tracking-tight: -0.028em;
  --tracking-snug: -0.016em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-pad: clamp(4.5rem, 2.6rem + 6.2vw, 8.5rem);
  --section-pad-sm: clamp(3.5rem, 2.4rem + 3.8vw, 6rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 76rem;            /* 1216px */
  --container-wide: 84rem;       /* 1344px */
  --container-narrow: 46rem;     /* 736px  */
  --gutter: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);
  --header-h: 4.25rem;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 480ms;
  --dur-reveal: 760ms;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 200;

  /* ---- Fixed inverse (always-dark) values, reused below ---------------- */
  --inverse-bg: var(--navy-850);
  --inverse-bg-deep: var(--navy-900);

  color-scheme: light;

  /* ======================================================================
     Semantic tokens — LIGHT theme (default)
     ====================================================================== */
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F5F7FB;
  --color-bg-muted: var(--slate-100);
  --color-surface: #FFFFFF;
  --color-surface-2: var(--slate-50);
  --color-surface-hover: var(--slate-25);
  --color-border: #E3E8EF;
  --color-border-strong: var(--slate-300);
  --color-border-accent: rgba(14, 149, 162, 0.42);
  --color-text: var(--brand-navy);
  --color-text-secondary: var(--slate-700);
  --color-text-muted: var(--slate-600);
  --color-text-faint: #5F6E85;           /* AA (4.6:1+) on white, subtle and muted surfaces */
  --color-heading: var(--brand-navy);
  --color-accent: var(--cyan-700);
  --color-accent-strong: var(--blue-600);
  --color-accent-bg: rgba(49, 199, 213, 0.1);
  --color-accent-blue-bg: rgba(82, 123, 255, 0.08);
  --color-link: var(--blue-700);
  --color-link-hover: var(--blue-600);
  --color-focus: var(--blue-500);
  --color-grid-line: rgba(11, 23, 41, 0.05);
  --color-success: var(--green-700);
  --color-success-bg: rgba(61, 214, 163, 0.12);
  --color-warning: var(--amber-700);
  --color-warning-bg: rgba(245, 185, 74, 0.16);
  --color-danger: var(--red-700);
  --color-danger-bg: rgba(255, 122, 133, 0.12);
  --color-input-bg: #FFFFFF;
  --color-selection: rgba(49, 199, 213, 0.28);

  --shadow-xs: 0 1px 2px rgba(11, 23, 41, 0.05);
  --shadow-sm: 0 1px 2px rgba(11, 23, 41, 0.04), 0 2px 8px rgba(11, 23, 41, 0.04);
  --shadow-md: 0 2px 4px rgba(11, 23, 41, 0.04), 0 10px 28px -8px rgba(11, 23, 41, 0.12);
  --shadow-lg: 0 4px 10px rgba(11, 23, 41, 0.04), 0 24px 56px -16px rgba(11, 23, 41, 0.2);
  --shadow-glow: 0 0 0 1px rgba(49, 199, 213, 0.18), 0 18px 48px -18px rgba(49, 199, 213, 0.35);

  /* Brand mark palette (deep tones that hold up on light surfaces) */
  --logo-c0: #0FA5B4;
  --logo-c1: #159BBB;
  --logo-c2: #2582CD;
  --logo-c3: #3469DF;
  --logo-c4: #3A5FE6;
  --logo-core: var(--brand-navy);
  --logo-node: #0FA5B4;
  --logo-spoke: rgba(11, 23, 41, 0.42);
  --logo-text: var(--brand-navy);
}

/* ==========================================================================
   Semantic tokens — DARK values
   Shared by: the dark theme, and always-dark .theme-inverse surfaces.
   (Declared three times because CSS has no mixins; keep them in sync.)
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--navy-900);
  --color-bg-subtle: #091424;
  --color-bg-muted: var(--navy-800);
  --color-surface: var(--navy-850);
  --color-surface-2: var(--navy-800);
  --color-surface-hover: #0E1C31;
  --color-border: rgba(152, 166, 186, 0.15);
  --color-border-strong: rgba(152, 166, 186, 0.28);
  --color-border-accent: rgba(49, 199, 213, 0.45);
  --color-text: var(--brand-white);
  --color-text-secondary: #C9D2DF;
  --color-text-muted: var(--brand-muted);
  --color-text-faint: #7D8BA1;
  --color-heading: #FFFFFF;
  --color-accent: var(--cyan-400);
  --color-accent-strong: var(--blue-400);
  --color-accent-bg: rgba(49, 199, 213, 0.1);
  --color-accent-blue-bg: rgba(82, 123, 255, 0.12);
  --color-link: var(--cyan-300);
  --color-link-hover: #FFFFFF;
  --color-focus: var(--cyan-400);
  --color-grid-line: rgba(152, 166, 186, 0.07);
  --color-success: var(--green-400);
  --color-success-bg: rgba(61, 214, 163, 0.12);
  --color-warning: var(--amber-400);
  --color-warning-bg: rgba(245, 185, 74, 0.12);
  --color-danger: var(--red-400);
  --color-danger-bg: rgba(255, 122, 133, 0.12);
  --color-input-bg: rgba(7, 17, 31, 0.6);
  --color-selection: rgba(49, 199, 213, 0.32);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3), 0 28px 64px -16px rgba(0, 0, 0, 0.6);
  --logo-c0: #31C7D5;
  --logo-c1: #36BCDB;
  --logo-c2: #42A1EA;
  --logo-c3: #4D86F9;
  --logo-c4: #527BFF;
  --logo-core: var(--brand-white);
  --logo-node: var(--cyan-400);
  --logo-spoke: rgba(152, 166, 186, 0.55);
  --logo-text: var(--brand-white);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: var(--navy-900);
    --color-bg-subtle: #091424;
    --color-bg-muted: var(--navy-800);
    --color-surface: var(--navy-850);
    --color-surface-2: var(--navy-800);
    --color-surface-hover: #0E1C31;
    --color-border: rgba(152, 166, 186, 0.15);
    --color-border-strong: rgba(152, 166, 186, 0.28);
    --color-border-accent: rgba(49, 199, 213, 0.45);
    --color-text: var(--brand-white);
    --color-text-secondary: #C9D2DF;
    --color-text-muted: var(--brand-muted);
    --color-text-faint: #7D8BA1;
    --color-heading: #FFFFFF;
    --color-accent: var(--cyan-400);
    --color-accent-strong: var(--blue-400);
    --color-accent-bg: rgba(49, 199, 213, 0.1);
    --color-accent-blue-bg: rgba(82, 123, 255, 0.12);
    --color-link: var(--cyan-300);
    --color-link-hover: #FFFFFF;
    --color-focus: var(--cyan-400);
    --color-grid-line: rgba(152, 166, 186, 0.07);
    --color-success: var(--green-400);
    --color-success-bg: rgba(61, 214, 163, 0.12);
    --color-warning: var(--amber-400);
    --color-warning-bg: rgba(245, 185, 74, 0.12);
    --color-danger: var(--red-400);
    --color-danger-bg: rgba(255, 122, 133, 0.12);
    --color-input-bg: rgba(7, 17, 31, 0.6);
    --color-selection: rgba(49, 199, 213, 0.32);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3), 0 28px 64px -16px rgba(0, 0, 0, 0.6);
    --logo-c0: #31C7D5;
    --logo-c1: #36BCDB;
    --logo-c2: #42A1EA;
    --logo-c3: #4D86F9;
    --logo-c4: #527BFF;
    --logo-core: var(--brand-white);
    --logo-node: var(--cyan-400);
    --logo-spoke: rgba(152, 166, 186, 0.55);
    --logo-text: var(--brand-white);
  }
}

/* Always-dark surfaces (hero, header, footer, inverse sections). */
.theme-inverse {
  color-scheme: dark;
  --color-bg: var(--navy-900);
  --color-bg-subtle: var(--navy-850);
  --color-bg-muted: var(--navy-800);
  --color-surface: rgba(255, 255, 255, 0.025);
  --color-surface-2: rgba(255, 255, 255, 0.04);
  --color-surface-hover: rgba(255, 255, 255, 0.045);
  --color-border: rgba(152, 166, 186, 0.15);
  --color-border-strong: rgba(152, 166, 186, 0.28);
  --color-border-accent: rgba(49, 199, 213, 0.45);
  --color-text: var(--brand-white);
  --color-text-secondary: #C9D2DF;
  --color-text-muted: var(--brand-muted);
  --color-text-faint: #7D8BA1;
  --color-heading: #FFFFFF;
  --color-accent: var(--cyan-400);
  --color-accent-strong: var(--blue-400);
  --color-accent-bg: rgba(49, 199, 213, 0.1);
  --color-accent-blue-bg: rgba(82, 123, 255, 0.12);
  --color-link: var(--cyan-300);
  --color-link-hover: #FFFFFF;
  --color-focus: var(--cyan-400);
  --color-grid-line: rgba(152, 166, 186, 0.07);
  --color-success: var(--green-400);
  --color-success-bg: rgba(61, 214, 163, 0.12);
  --color-warning: var(--amber-400);
  --color-warning-bg: rgba(245, 185, 74, 0.12);
  --color-danger: var(--red-400);
  --color-danger-bg: rgba(255, 122, 133, 0.12);
  --color-input-bg: rgba(7, 17, 31, 0.6);
  --color-selection: rgba(49, 199, 213, 0.32);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3), 0 28px 64px -16px rgba(0, 0, 0, 0.6);
  --logo-c0: #31C7D5;
  --logo-c1: #36BCDB;
  --logo-c2: #42A1EA;
  --logo-c3: #4D86F9;
  --logo-c4: #527BFF;
  --logo-core: var(--brand-white);
  --logo-node: var(--cyan-400);
  --logo-spoke: rgba(152, 166, 186, 0.55);
  --logo-text: var(--brand-white);
}