/* Veriroo Design Tokens (non-breaking aliases)
   Purpose: provide named, reusable layout + component presets so pages stay consistent.
   NOTE: These are additive; they do not replace existing site styles. */

:root{
  /* Layout */
  --layout-max-1: 1120px; /* matches .vr-main in site.css */
  --layout-max-2: 880px;  /* narrower content pages */
  --margins-1: 1.8rem 1.3rem 3rem; /* matches .vr-main padding */
  --margins-2: 2.2rem 1.5rem 3.2rem;
  --margins-3: 1.2rem 1.1rem 2.2rem; /* tight */
}

/* Max-width presets */
.layout-max-1{ max-width: var(--layout-max-1); margin: 0 auto; }
.layout-max-2{ max-width: var(--layout-max-2); margin: 0 auto; }

/* Margin/padding presets (apply to main wrapper) */
.margins-1{ padding: var(--margins-1); }
.margins-2{ padding: var(--margins-2); }
.margins-3{ padding: var(--margins-3); }

/* Simple component presets (safe defaults) */
.card-1{
  border: 1px solid rgba(148,163,184,0.24);
  background: rgba(15,23,42,0.55);
  border-radius: 18px;
  padding: 18px;
}
.card-2{
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(5,8,20,0.55);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.pill-1{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.75);
  font-size: 12px;
}
.btn-1, .btn-2, .btn-3, .btn-4{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  text-decoration:none;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.6);
}
.btn-2{ padding: 12px 18px; }
.btn-3{ border-radius: 14px; padding: 10px 14px; }
.btn-4{ background: rgba(108,99,255,0.16); border-color: rgba(108,99,255,0.40); }


/* Styleguide helpers (templates only)
   These classes are used by /templates/*.html to present presets cleanly.
   Safe to keep globally — they only affect elements you explicitly mark up. */

.sg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.sg-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.sg-label {
  font-size: .85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .4rem;
}

.sg-note {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 1rem;
}

.sg-kbd {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9em;
}

.sg-divider {
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 1rem 0;
}