/* ============================================================
   BELVYON PORTFOLIO DESIGN SYSTEM — base.css
   Reset + base element styling + shared primitives (container,
   buttons, section rhythm, reveal). Depends on tokens.css.
   Uses logical properties so RTL (ar/fa/he/ur) mirrors for free.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; font-family:var(--font-body); font-size:var(--fs-base);
  line-height:var(--lh-normal); color:var(--color-ink);
  background:var(--color-light); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--fw-bold);
  line-height:var(--lh-tight); margin:0 0 var(--sp-4); color:var(--color-secondary); }
h1{ font-size:var(--fs-4xl); }
h2{ font-size:var(--fs-3xl); }
h3{ font-size:var(--fs-xl); }
p{ margin:0 0 var(--sp-4); max-width:70ch; }
.lead{ font-size:var(--fs-md); color:var(--color-muted); }
.eyebrow{ font-family:var(--font-body); font-weight:var(--fw-semibold);
  letter-spacing:.14em; text-transform:uppercase; font-size:var(--fs-xs);
  color:var(--accent); margin-block-end:var(--sp-3); }

/* ---- Layout primitives ---- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:var(--container-wide); }
.section{ padding-block:var(--sp-9); }
.section--dark{ background:var(--gradient-dark); color:#e7ecf5; }
.section--dark h1,.section--dark h2,.section--dark h3{ color:#fff; }
.grid{ display:grid; gap:var(--sp-6); }
@media(min-width:768px){ .grid--2{ grid-template-columns:repeat(2,1fr);} .grid--3{ grid-template-columns:repeat(3,1fr);} .grid--4{ grid-template-columns:repeat(4,1fr);} }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6); border-radius:var(--radius-pill);
  font-weight:var(--fw-semibold); border:2px solid transparent;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast); }
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-1); }
.btn--primary:hover{ box-shadow:var(--shadow-accent); }
.btn--ghost{ border-color:currentColor; color:var(--color-secondary); }
.section--dark .btn--ghost{ color:#fff; }

/* ---- Cards ---- */
.card{ background:#fff; border:1px solid var(--color-line);
  border-radius:var(--radius-lg); padding:var(--sp-6); box-shadow:var(--shadow-1);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }

/* ---- Scroll reveal (WOW.js replacement, motion-safe) ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---- Accessibility helpers ---- */
.visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
.skip-link{ position:absolute; inset-block-start:-100%; inset-inline-start:var(--sp-4); z-index:var(--z-modal);
  background:var(--accent); color:#fff; padding:var(--sp-3) var(--sp-5); border-radius:0 0 var(--radius) var(--radius); }
.skip-link:focus{ inset-block-start:0; }