/* =====================================================
   Jassas Foundation
   FILE: /public_html/assets/css/jassas-foundation.css
   ===================================================== */

:root{

  /* Core */
  --js-bg:#f3f7ff;
  --js-bg-soft:#eaf1ff;
  --js-surface:#ffffff;
  --js-surface-soft:#f8fbff;

  --js-text-strong:#0f172a;
  --js-text:#1e293b;
  --js-text-soft:#64748b;

  --js-border:#dbe7f5;
  --js-line:#e6eef8;

  /* Brand Blue */
  --js-primary:#2563eb;
  --js-primary-hover:#1d4ed8;
  --js-primary-deep:#1e3a8a;
  --js-primary-soft:#dbeafe;

  /* Status */
  --js-success:#16a34a;
  --js-warning:#f59e0b;
  --js-danger:#dc2626;

  /* Shadows */
  --js-shadow-xs:0 2px 8px rgba(37,99,235,.05);
  --js-shadow-sm:0 8px 24px rgba(37,99,235,.08);
  --js-shadow-md:0 14px 34px rgba(37,99,235,.10);
  --js-shadow-lg:0 20px 46px rgba(37,99,235,.14);
  --js-shadow-xl:0 28px 64px rgba(37,99,235,.18);

  /* Radius */
  --js-radius-sm:12px;
  --js-radius-md:16px;
  --js-radius-lg:20px;
  --js-radius-xl:24px;
  --js-radius-2xl:28px;
  --js-radius-3xl:34px;
  --js-radius-pill:999px;

  /* Spacing */
  --js-space-1:4px;
  --js-space-2:8px;
  --js-space-3:12px;
  --js-space-4:16px;
  --js-space-5:20px;
  --js-space-6:24px;
  --js-space-7:28px;
  --js-space-8:32px;
  --js-space-10:40px;
  --js-space-12:48px;

  /* Typography */
  --js-font:"Cairo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --js-text-xs:12px;
  --js-text-sm:14px;
  --js-text-md:16px;
  --js-text-lg:20px;
  --js-text-xl:24px;
  --js-text-2xl:30px;
  --js-text-3xl:38px;

  --js-fw-regular:600;
  --js-fw-semibold:700;
  --js-fw-bold:900;

  --js-leading-tight:1.25;
  --js-leading-normal:1.55;
  --js-leading-relaxed:1.85;

  /* Layout */
  --js-wrap:1180px;
  --js-topbar-h:82px;
  --js-bottom-nav-h:84px;
}

[data-theme="dark"]{
  --js-bg:#0b1220;
  --js-bg-soft:#0f172a;
  --js-surface:#111b2e;
  --js-surface-soft:#162235;

  --js-text-strong:#ffffff;
  --js-text:#e5eefc;
  --js-text-soft:#9fb0c7;

  --js-border:#21314b;
  --js-line:#1b2a42;

  --js-primary:#3b82f6;
  --js-primary-hover:#2563eb;
  --js-primary-deep:#1d4ed8;
  --js-primary-soft:rgba(59,130,246,.14);

  --js-shadow-xs:0 2px 8px rgba(0,0,0,.18);
  --js-shadow-sm:0 10px 24px rgba(0,0,0,.24);
  --js-shadow-md:0 16px 36px rgba(0,0,0,.30);
  --js-shadow-lg:0 22px 48px rgba(0,0,0,.36);
  --js-shadow-xl:0 30px 70px rgba(0,0,0,.42);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  font-family:var(--js-font);
  background:
    radial-gradient(900px 320px at 50% -5%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg,var(--js-bg-soft) 0%, var(--js-bg) 100%);
  color:var(--js-text);
  line-height:var(--js-leading-normal);
  min-height:100svh;
}

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

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

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

/* Utilities */
.js-wrap{
  width:min(calc(100% - 24px), var(--js-wrap));
  margin-inline:auto;
}

.js-stack-2{display:grid;gap:var(--js-space-2);}
.js-stack-3{display:grid;gap:var(--js-space-3);}
.js-stack-4{display:grid;gap:var(--js-space-4);}
.js-stack-5{display:grid;gap:var(--js-space-5);}
.js-stack-6{display:grid;gap:var(--js-space-6);}
.js-stack-8{display:grid;gap:var(--js-space-8);}

.js-flex{
  display:flex;
  gap:var(--js-space-3);
}

.js-flex-wrap{
  display:flex;
  gap:var(--js-space-3);
  flex-wrap:wrap;
}

.js-between{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--js-space-3);
}

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

.js-muted{
  color:var(--js-text-soft);
}

.js-caption{
  font-size:var(--js-text-sm);
  color:var(--js-text-soft);
  font-weight:var(--js-fw-semibold);
}

.js-section-space{
  padding-block:var(--js-space-8);
}

.js-card{
  background:var(--js-surface);
  border:1px solid var(--js-border);
  border-radius:var(--js-radius-2xl);
  box-shadow:var(--js-shadow-sm);
}

.js-card-soft{
  background:var(--js-surface-soft);
  border:1px solid var(--js-border);
  border-radius:var(--js-radius-xl);
}

@media (max-width:760px){
  :root{
    --js-topbar-h:74px;
    --js-bottom-nav-h:78px;
    --js-text-lg:18px;
    --js-text-xl:22px;
    --js-text-2xl:28px;
    --js-text-3xl:32px;
  }

  .js-wrap{
    width:min(calc(100% - 16px), var(--js-wrap));
  }
}