/*
Theme Name: StructuraLab UI
Theme URI: https://structuralab.local
Author: StructuraLab
Author URI: https://structuralab.local
Description: Hybrid SaaS UI Theme for StructuraLab MLM Training Simulator Platform.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: slab-ui
*/

:root{

  /* BACKGROUNDS */
  --slab-bg-primary:#050814;
  --slab-bg-secondary:#020617;
  --slab-bg-card:#0f172a;

  /* TEXT */
  --slab-text-primary:#ffffff;
  --slab-text-secondary:#cbd5e1;
  --slab-text-muted:#94a3b8;

  /* ACCENTS */
  --slab-accent:#2563eb;
  --slab-accent-light:#3b82f6;

  /* BORDERS */
  --slab-border:rgba(59,130,246,.15);

  /* SHADOWS */
  --slab-shadow:
    0 10px 40px rgba(37,99,235,.15);

  /* RADIUS */
  --slab-radius-sm:10px;
  --slab-radius-md:16px;
  --slab-radius-lg:24px;

  /* SPACING */
  --slab-space-xs:8px;
  --slab-space-sm:12px;
  --slab-space-md:20px;
  --slab-space-lg:32px;
  --slab-space-xl:48px;

  /* CONTAINER */
  --slab-container:1400px;

}

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

html{
  scroll-behavior:smooth;
}

body{

  background:
    radial-gradient(
      circle at top,
      #0f172a 0%,
      #050814 45%,
      #020617 100%
    );

  color:var(--slab-text-primary);

  font-family:
    Inter,
    "Segoe UI",
    sans-serif;

  min-height:100vh;

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  display:block;
}

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

ul{
  list-style:none;
}

button,
input,
textarea,
select{
  font:inherit;
}

.container{
  width:100%;
  max-width:var(--slab-container);
  margin:auto;
  padding-inline:24px;
}

/* ======================================================
   GLOBAL GLASS CARD
====================================================== */

.slab-card{

  background:rgba(15,23,42,.88);

  border:1px solid var(--slab-border);

  border-radius:var(--slab-radius-md);

  backdrop-filter:blur(18px);

  box-shadow:var(--slab-shadow);
}

/* ======================================================
   GLOBAL BUTTON
====================================================== */

.slab-btn{

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:10px;

  padding:14px 22px;

  border:none;
  border-radius:14px;

  background:linear-gradient(
    135deg,
    var(--slab-accent),
    var(--slab-accent-light)
  );

  color:#fff;

  cursor:pointer;

  transition:.25s ease;
}

.slab-btn:hover{
  transform:translateY(-2px);
  opacity:.95;
}

/* ======================================================
   GLOBAL SECTION
====================================================== */

.slab-section{
  padding:100px 0;
}

/* ======================================================
   GLOBAL HEADINGS
====================================================== */

h1,h2,h3,h4,h5,h6{
  line-height:1.1;
}

p{
  color:var(--slab-text-secondary);
  line-height:1.7;
}

/* ======================================================
   APP BODY LOCK
====================================================== */

.slab-app-body{
  overflow:hidden;
}

/* ======================================================
   MOBILE
====================================================== */

@media(max-width:768px){

  .container{
    padding-inline:18px;
  }

  .slab-section{
    padding:72px 0;
  }

}