/* styles/design-system-v2.css */

/* ========== TOKENS ========== */
:root{
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Tahoma", "Arial", sans-serif;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-44: 44px;
  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* Radii */
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-28: 28px;

  /* Spacing */
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-14: 14px;
  --s-16: 16px;
  --s-18: 18px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --s-32: 32px;
  --s-40: 40px;
  --s-56: 56px;
  --s-72: 72px;

  /* Colors (Blue Life / Sea Green calm) */
  --bg: #f6fbff;
  --bg2: #eef7ff;
  --surface: rgba(255,255,255,0.72);
  --surface-strong: rgba(255,255,255,0.88);
  --border: rgba(18, 44, 66, 0.10);
  --border-strong: rgba(18, 44, 66, 0.16);

  --text: #0b2336;
  --muted: rgba(11,35,54,0.68);
  --muted2: rgba(11,35,54,0.52);

  --primary: #1976ff;
  --primary-2: #0f5fe0;
  --primary-soft: rgba(25,118,255,0.10);

  --sea: #1eb9a6;
  --sea-soft: rgba(30,185,166,0.14);

  --shadow-sm: 0 10px 28px rgba(10, 30, 46, 0.08);
  --shadow-md: 0 16px 48px rgba(10, 30, 46, 0.10);
  --shadow-lg: 0 22px 64px rgba(10, 30, 46, 0.12);

  --ring: 0 0 0 3px rgba(25,118,255,0.18);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 140ms;
  --t: 220ms;
}

/* ========== BASE ========== */
html { direction: rtl; }
* { box-sizing: border-box; }
body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(900px 420px at 18% 14%, rgba(25,118,255,0.14), transparent 55%),
    radial-gradient(760px 360px at 78% 22%, rgba(30,185,166,0.12), transparent 52%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height: 100vh;
}

a{ color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
:focus-visible{ outline: none; box-shadow: var(--ring); border-color: rgba(25,118,255,0.35); }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ========== LAYOUT ========== */
.container{
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.section{ padding: var(--s-56) 0; }
.section-tight{ padding: var(--s-40) 0; }

.grid{
  display: grid;
  gap: var(--s-18);
}
.grid-12{ grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-12{ grid-column: span 12; }
.col-8{ grid-column: span 8; }
.col-7{ grid-column: span 7; }
.col-6{ grid-column: span 6; }
.col-5{ grid-column: span 5; }
.col-4{ grid-column: span 4; }
.col-3{ grid-column: span 3; }

@media (max-width: 960px){
  .container{ width: min(1180px, calc(100% - 28px)); }
  .col-8,.col-7,.col-6,.col-5,.col-4,.col-3{ grid-column: span 12; }
}

/* ========== SURFACES ========== */
.surface{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.card{
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  box-shadow: var(--shadow-sm);
}

.card-pad{ padding: var(--s-20); }
.card-pad-lg{ padding: var(--s-24); }

.divider{
  height: 1px;
  background: rgba(18,44,66,0.10);
}

/* ========== TYPO ========== */
.h1{
  font-size: var(--fs-44);
  line-height: var(--lh-tight);
  margin: 0;
  letter-spacing: -0.3px;
}
.h2{
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  margin: 0;
}
.p{
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--muted);
  margin: 0;
}
.small{
  font-size: var(--fs-14);
  color: var(--muted2);
}

/* ========== COMPONENTS ========== */
/* Buttons */
.btn{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.70);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
  user-select: none;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.btn:active{ transform: translateY(0px); }

.btn-primary{
  background: linear-gradient(180deg, rgba(25,118,255,0.96), rgba(15,95,224,0.96));
  color: white;
  border-color: rgba(25,118,255,0.25);
}
.btn-primary:hover{ box-shadow: var(--shadow-md); }

.btn-soft{
  background: rgba(25,118,255,0.10);
  border-color: rgba(25,118,255,0.20);
  color: var(--text);
}
.btn-ghost{
  background: rgba(255,255,255,0.50);
}

/* Inputs */
.input, .select{
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-16);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.72);
  color: var(--text);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.input::placeholder{ color: rgba(11,35,54,0.40); }

/* Chips / Badges */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.62);
  color: var(--text);
  font-size: var(--fs-14);
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(30,185,166,0.28);
  background: rgba(30,185,166,0.10);
  color: var(--text);
  font-size: var(--fs-14);
}
.dot{
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--sea);
  box-shadow: 0 0 0 4px rgba(30,185,166,0.10);
}

/* Stats cards */
.stat{
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--r-20);
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--border);
}
.stat .num{ font-size: var(--fs-22); font-weight: 800; }
.stat .lbl{ font-size: var(--fs-14); color: var(--muted); }

/* Skeleton */
.skeleton{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.60);
  border: 1px solid var(--border);
  border-radius: var(--r-20);
}
.skeleton::after{
  content:"";
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: shimmer 1.1s var(--ease) infinite;
}
@keyframes shimmer{
  to { transform: translateX(60%); }
}

/* ========== HERO (Unified) ========== */
.hero{
  padding: var(--s-72) 0 var(--s-32);
  text-align: center; /* change to right if you want: text-align:right; */
}
.hero .hero-badge{
  display: flex;
  justify-content: center; /* flex-end if right-aligned */
  margin-bottom: var(--s-14);
}
.hero .hero-subtitle{
  margin-top: var(--s-12);
  max-width: 62ch;
  margin-inline: auto;
}
.hero .hero-actions{
  margin-top: var(--s-20);
  display: flex;
  gap: var(--s-10);
  justify-content: center; /* flex-end if right-aligned */
  flex-wrap: wrap;
}

/* ========== FILTERS TOPBAR ========== */
.filtersbar{
  display: grid;
  gap: var(--s-12);
  padding: var(--s-16);
  border-radius: var(--r-20);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.filtersbar__row{
  display: grid;
  gap: var(--s-12);
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: center;
}
.filtersbar__actions{
  display: flex;
  gap: var(--s-10);
  justify-content: flex-start;
}
@media (max-width: 960px){
  .filtersbar__row{ grid-template-columns: 1fr; }
  .filtersbar__actions{ justify-content: stretch; }
  .filtersbar__actions .btn{ width: 100%; }
}

details.advanced{
  border-top: 1px solid rgba(18,44,66,0.10);
  padding-top: var(--s-12);
}
details.advanced > summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--muted);
  font-size: var(--fs-14);
}
details.advanced > summary::-webkit-details-marker{ display:none; }
details.advanced[open] > summary{ color: var(--text); }

/* ========== ARTICLES GRID ========== */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-18);
}
@media (max-width: 960px){
  .cards-grid{ grid-template-columns: 1fr; }
}

.article-card{
  padding: var(--s-20);
}
.article-card .meta{
  display:flex;
  justify-content: space-between;
  gap: var(--s-10);
  align-items:center;
  margin-bottom: var(--s-12);
}
.article-card .title{
  font-size: var(--fs-18);
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 var(--s-8);
}
.article-card .excerpt{
  font-size: var(--fs-14);
  color: var(--muted);
  margin: 0;
}