/* ============================================================================
   SELLIO.MA — BASE
   Reset, typography scale, root layout primitives (.container / .shell /
   .grid / .row) and global treatments. Requires tokens.css (loaded first).
   Typography sizes mirror the docs "Typography" specimen
   (docs/sellio-component.html § Foundations): H1 44/900, H2 30/900,
   H3 24/900, H4 19/700, Body 15/400. Mobile-first: single column up to the
   docs' 900px collapse point, then multi-column grids engage.
   All positioning uses logical properties so the sheet is RTL-ready.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box;}

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

html,body{margin:0;padding:0;}

body{
  font-family:var(--font);
  font-size:.9375rem;            /* 15px — docs body size */
  line-height:1.2;               /* docs body line-height; paragraphs override */
  background:var(--white);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}

/* ---------- typography ---------- */
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-0.01em;line-height:1.15;}
h1{font-size:clamp(1.75rem,5.5vw,2.75rem);}      /* 28 → 44px */
h2{font-size:clamp(1.5rem,4vw,1.875rem);}        /* 24 → 30px */
h3{font-size:1.5rem;}                              /* 24px */
h4{font-size:1.1875rem;font-weight:700;}          /* 19px / 700 per docs type scale */
h5,h6{margin:0;font-size:.875rem;font-weight:800;}

p{margin:0;line-height:1.55;}

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

b,strong{font-weight:800;}
small{font-size:.75rem;}

ul[class],ol[class]{list-style:none;margin:0;padding:0;}

::selection{background:var(--red);color:var(--white);}

/* ---------- focus-visible (red ring consistent with control focus) -------- */
:focus-visible{
  outline:var(--focus-outline);
  outline-offset:2px;
}
/* native controls that already show a ring via --focus-ring keep their
   box-shadow treatment from components.css */
.input:focus-visible,.input-float:focus-visible,.select:focus-visible,
.textarea:focus-visible,.dd-trigger:focus-visible{outline:none;}

/* ---------- media + svg primitives ---------- */
img,svg,video{max-width:100%;}
img{height:auto;display:block;}

/* icon sprite primitives (docs: .icon / .icon-sm / .icon-lg) */
.icon{
  width:20px;height:20px;
  stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  display:inline-block;vertical-align:middle;flex-shrink:0;
}
.icon-sm{width:16px;height:16px;}
.icon-lg{width:28px;height:28px;}

/* ---------- form element defaults ---------- */
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}

/* ---------- layout primitives ---------- */
.container{
  width:100%;
  margin-inline:auto;
  padding-inline:var(--s-16);
  max-width:var(--container-mobile);
}
@media(min-width:600px){ .container{max-width:var(--container-tablet);} }
@media(min-width:900px){ .container{max-width:var(--container-desktop);} }
@media(min-width:1200px){ .container{max-width:var(--container-large);} }

/* docs shell: sidebar + content; sidebar drops below 900px */
.shell{display:grid;grid-template-columns:1fr;min-height:100vh;}
@media(min-width:900px){ .shell{grid-template-columns:260px 1fr;} }

.grid{display:grid;gap:var(--s-16);grid-template-columns:1fr;}
@media(min-width:900px){
  .g2{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(3,1fr);}
  .g4{grid-template-columns:repeat(4,1fr);}
}
@media(min-width:600px) and (max-width:899.98px){
  .g2,.g4{grid-template-columns:repeat(2,1fr);}
}

.row{display:flex;gap:var(--s-12);flex-wrap:wrap;align-items:center;}

/* keyboard skip link: off-screen until focused */
.skip-link{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  padding:var(--s-8) var(--s-16);margin:var(--s-8);
  background:var(--red);color:var(--white);border-radius:12px;
  font-weight:700;z-index:100;transform:translateY(-200%);
}
.skip-link:focus{transform:none;}

/* ---------- reduced motion ----------
   NOTE: the only non-form-control use of !important in this port. This is
   the canonical accessibility reset pattern; without !important a universal
   rule in base.css can never beat the class-level animations declared later
   in components.css (shimmer, spin, control transitions). */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- print-safe basics ---------- */
@media print{
  body{background:#fff;color:#000;}
  .shell{display:block;min-height:0;}
  .card,.listing-card,.plan-card,.stat-card{box-shadow:none;break-inside:avoid;}
  .media.carousel .car-nav,.media.carousel .car-dots{display:none;}
  a{text-decoration:underline;}
}

/* ============================================================================
   DARK MODE — FEATURE-FLAGGED OFF.
   Sellio ships light-only. If a dark theme is ever enabled, add the neutral
   palette flips (--white/--white-2/--white-3/--white-4/--text-*) inside the
   block below. Do NOT populate it until the flag ships.
   ============================================================================ */
@media(prefers-color-scheme:dark){
  /* dark theme intentionally not shipped (feature flag off) */
}