/* ============================================================
   SYSNOT Master Theme — base.css
   Reset + Design Tokens + Typography + Utilities
   ============================================================ */

/* ----------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ---------------------------------------------------------- */

:root {
  --bg: #04040a;
  --bg2: #07070f;
  --sur: #0d0d1c;
  --sur2: #111122;
  --a1: #7B5EA7;
  --a2: #E8415A;
  --a3: #00E5B4;
  --a4: #FFB547;
  --txt: #EEEEF5;
  --mut: #55556A;
  --brd: rgba(123, 94, 167, .15);
  --head: 'Bebas Neue', sans-serif;
  --body: 'DM Sans', sans-serif;
  --e1: cubic-bezier(.16, 1, .3, 1);
  --e2: cubic-bezier(.34, 1.56, .64, 1);
  --radius: 24px;
  --radius-sm: 14px;
  --radius-full: 100px;
}

/* ----------------------------------------------------------
   2. Light Mode Tokens
   ---------------------------------------------------------- */

[data-theme="light"] {
  --bg: #f5f4ff;
  --bg2: #ede9ff;
  --sur: #fff;
  --sur2: #f0eeff;
  --txt: #08081a;
  --mut: #7070a0;
  --brd: rgba(123, 94, 167, .12);
}

/* ----------------------------------------------------------
   3. Modern CSS Reset
   ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg);
  color: var(--txt);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------
   4. Element Resets
   ---------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--a1);
  outline-offset: 3px;
  border-radius: 4px;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  border: none;
}

hr {
  border: none;
  border-top: 1px solid var(--brd);
  margin: 3rem 0;
}

blockquote {
  border-left: 3px solid var(--a1);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--mut);
}

code,
pre {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875em;
}

pre {
  background: var(--sur);
  border: 1px solid var(--brd);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  overflow-x: auto;
}

strong,
b {
  font-weight: 700;
}

::selection {
  background: rgba(123, 94, 167, .35);
  color: var(--txt);
}

/* ----------------------------------------------------------
   5. Custom Scrollbar
   ---------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--a1);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--a1) 80%, white);
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--a1) var(--bg);
}

/* ----------------------------------------------------------
   6. Typography System
   ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--head);
  color: var(--txt);
  line-height: 1;
  letter-spacing: .01em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: .9;
  letter-spacing: .02em;
}

h2 {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: .92;
}

h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: .95;
}

h4 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1;
}

h5 {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.05;
}

h6 {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.1;
}

p {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--txt);
}

.accent,
em.accent {
  color: var(--a1);
  font-style: normal;
}

small {
  font-size: 0.85rem;
  color: var(--mut);
}

/* ----------------------------------------------------------
   7. Utility Classes
   ---------------------------------------------------------- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
}

.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   8. Section Spacing
   ---------------------------------------------------------- */

section {
  padding: 10rem 0;
  position: relative;
}