:root {
      --accent-h: 255;
      --grid-line: rgba(11, 10, 16, 0.05);
      --grid-line-dark: rgba(255, 255, 255, 0.04);
}

html {
      scroll-behavior: smooth;
}

body {
      background-color: #EDF1F4;
      color: #0B0A10;
      font-family: 'IBM Plex Sans Arabic', sans-serif;
      transition: background-color 0.3s ease, color 0.3s ease;
}

.dark body {
      background-color: #0B0A10;
      color: #F4F2F0;
}

.font-display {
      font-family: 'Cairo', sans-serif;
}

.font-mono {
      font-family: 'JetBrains Mono', monospace;
      direction: ltr;
}

/* Dynamic Accent Colors */
.accent {
      color: hsl(var(--accent-h) 85% 60%);
}

.accent-bg {
      background-color: hsl(var(--accent-h) 85% 58%);
}

.accent-border {
      border-color: hsl(var(--accent-h) 70% 55% / 0.4);
}

.accent-glow {
      box-shadow: 0 0 50px -10px hsl(var(--accent-h) 85% 55% / 0.4);
}

/* Blueprint grid background */
.blueprint-grid {
      background-image:
            linear-gradient(var(--grid-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 36px 36px;
}

.dark .blueprint-grid {
      background-image:
            linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
}

/* Section Header Ghost Title */
.ghost-title {
      font-family: 'Cairo', sans-serif;
      font-weight: 900;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px hsl(var(--accent-h) 60% 60% / 0.12);
      pointer-events: none;
      user-select: none;
}

/* Technical frame corner marks */
.frame-marks {
      position: relative;
}

.frame-marks::before,
.frame-marks::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      border-color: hsl(var(--accent-h) 85% 60%);
      opacity: 0.8;
      z-index: 20;
}

.frame-marks::before {
      top: -1px;
      right: -1px;
      border-top: 2px solid;
      border-right: 2px solid;
}

.frame-marks::after {
      bottom: -1px;
      left: -1px;
      border-bottom: 2px solid;
      border-left: 2px solid;
}

/* Status Pulse Ring */
.pulse-ring::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 9999px;
      animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      background: currentColor;
}

@keyframes pulse-ring {
      0% {
            transform: scale(1);
            opacity: 0.7;
      }

      100% {
            transform: scale(2.4);
            opacity: 0;
      }
}

/* Scroll Reveals */
.reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
}

.reveal.in {
      opacity: 1;
      transform: translateY(0);
}

/* Horizontal snap scroller */
.snap-row {
      scroll-snap-type: x proximity;
      scrollbar-width: none;
}

.snap-row::-webkit-scrollbar {
      display: none;
}

.snap-item {
      scroll-snap-align: start;
}

::selection {
      background: hsl(var(--accent-h) 85% 55%);
      color: #0B0A10;
}

a:focus-visible,
button:focus-visible {
      outline: 2px solid hsl(var(--accent-h) 85% 65%);
      outline-offset: 3px;
}