/* ─────────────────────────────────────────────────────────────
   Tecnomics Layout System (TLS) v1.1 — Namespaced & Scoped
   - All variables prefixed with --tls-
   - All primitives scoped under .tls to avoid global collisions
   ---------------------------------------------------------------- */

/* ====== Design Tokens (namespaced) ====== */
:root{
  /* Spacing */
  --tls-space-1: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
  --tls-space-2: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --tls-space-3: clamp(0.75rem, 0.6rem + 0.5vw, 1rem);
  --tls-space-4: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
  --tls-space-5: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --tls-space-6: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  --tls-space-7: clamp(3rem, 2.4rem + 2vw, 4.5rem);

  /* Containers */
  --tls-container-xs: 38rem;
  --tls-container-sm: 48rem;
  --tls-container-md: 64rem;
  --tls-container-lg: 80rem;
  --tls-container-xl: 96rem;

  /* Layout tokens */
  --tls-gutter: var(--tls-space-4);
  --tls-radius: 1rem;
  --tls-shadow-1: 0 4px 12px rgba(0,0,0,.08);
  --tls-shadow-2: 0 12px 24px rgba(0,0,0,.12);

  /* Typography */
  --tls-step--1: clamp(0.85rem, 0.82rem + .1vw, .95rem);
  --tls-step-0:  clamp(1rem, .98rem + .1vw, 1.05rem);
  --tls-step-1:  clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
  --tls-step-2:  clamp(1.3rem, 1.12rem + .6vw, 1.7rem);
  --tls-step-3:  clamp(1.6rem, 1.24rem + 1.2vw, 2.25rem);
  --tls-step-4:  clamp(2rem, 1.4rem + 1.8vw, 3rem);

  /* Theming hooks (map to existing if present) */
  --tls-bg: var(--bg);
  --tls-surface: var(--card);
  --tls-text: var(--fg);
  --tls-muted: var(--muted, #9aa4af);
  --tls-brand: var(--accent);
  --tls-brand-ink: color-mix(in oklab, var(--accent) 15%, black);
}

/* Density modes (scoped) */
.tls[data-density="compact"]{ --tls-gutter: var(--tls-space-3); --tls-radius: .75rem; }
.tls[data-density="cozy"]{ --tls-gutter: var(--tls-space-4); }
.tls[data-density="spacious"]{ --tls-gutter: var(--tls-space-5); --tls-radius: 1.25rem; }

/* ====== Primitives (scoped) ====== */

.tls .container{ width: min(100% - 2rem, var(--tls-container-md)); margin-inline: auto; }
.tls .container--xs{ max-width: var(--tls-container-xs); }
.tls .container--sm{ max-width: var(--tls-container-sm); }
.tls .container--md{ max-width: var(--tls-container-md); }
.tls .container--lg{ max-width: var(--tls-container-lg); }
.tls .container--xl{ max-width: var(--tls-container-xl); }

.tls .section{ padding-block: var(--tls-space-6); }
.tls .section--tight{ padding-block: var(--tls-space-5); }
.tls .section--loose{ padding-block: var(--tls-space-7); }
.tls .section--lined{ border-block: 1px solid color-mix(in oklab, var(--tls-text) 12%, transparent); }

.tls .stack{ display: flex; flex-direction: column; gap: var(--tls-space-3); }
.tls .stack--sm{ gap: var(--tls-space-2); }
.tls .stack--lg{ gap: var(--tls-space-5); }

.tls .cluster{ display: flex; flex-wrap: wrap; gap: var(--tls-space-2); align-items: center; }

.tls .grid{ display: grid; gap: var(--tls-gutter); }
.tls .cols-1{ grid-template-columns: 1fr; }
.tls .cols-2{ grid-template-columns: repeat(2, 1fr); }
.tls .cols-3{ grid-template-columns: repeat(3, 1fr); }
.tls .cols-4{ grid-template-columns: repeat(4, 1fr); }

@media (min-width: 48rem){
  .tls .md\\:cols-2{ grid-template-columns: repeat(2, 1fr); }
  .tls .md\\:cols-3{ grid-template-columns: repeat(3, 1fr); }
  .tls .md\\:cols-4{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 64rem){
  .tls .lg\\:cols-2{ grid-template-columns: repeat(2, 1fr); }
  .tls .lg\\:cols-3{ grid-template-columns: repeat(3, 1fr); }
  .tls .lg\\:cols-4{ grid-template-columns: repeat(4, 1fr); }
}

.tls .sidebar{ display: grid; grid-template-columns: minmax(16rem, 28rem) 1fr; gap: var(--tls-gutter); }
.tls .sidebar--right{ grid-template-columns: 1fr minmax(16rem, 28rem); }

.tls .switcher{ display:flex; flex-wrap:wrap; gap:var(--tls-gutter); }
.tls .switcher > *{ flex: 1 1 clamp(14rem, 30%, 24rem); }

.tls .reel{ display:flex; overflow:auto; gap:var(--tls-gutter); scroll-snap-type: x mandatory; padding-block: var(--tls-space-2); }
.tls .reel > *{ scroll-snap-align:start; flex: 0 0 auto; }

.tls .card{ background: var(--tls-surface); color: var(--tls-text); border-radius: var(--tls-radius); box-shadow: var(--tls-shadow-1); padding: var(--tls-space-4); }
.tls .card--hover:hover{ box-shadow: var(--tls-shadow-2); transform: translateY(-2px); transition: box-shadow .2s ease, transform .2s ease; }

.tls .lead{ font-size: var(--tls-step-1); color: var(--tls-muted); }
.tls .h1{ font-size: var(--tls-step-4); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.tls .h2{ font-size: var(--tls-step-3); font-weight: 700; line-height: 1.15; }
.tls .h3{ font-size: var(--tls-step-2); font-weight: 700; }

.tls .center{ text-align: center; }
.tls .right{ text-align: right; }
.tls .gap-1{ gap: var(--tls-space-1); }
.tls .gap-2{ gap: var(--tls-space-2); }
.tls .gap-3{ gap: var(--tls-space-3); }
.tls .gap-4{ gap: var(--tls-space-4); }
.tls .gap-5{ gap: var(--tls-space-5); }

.tls .btn{ display:inline-flex; align-items:center; justify-content:center; padding: .7rem 1rem; border-radius: .75rem; background: color-mix(in oklab, var(--tls-brand) 18%, transparent); color: var(--tls-text); text-decoration:none; border: 1px solid color-mix(in oklab, var(--tls-brand) 40%, transparent); }
.tls .btn:hover{ background: color-mix(in oklab, var(--tls-brand) 26%, transparent); }

/* Keep body color hook opt-in to avoid global overrides */
.tls{ background: var(--tls-bg); color: var(--tls-text); }