/*
 * rsmproducciones — Child Styles
 * Loads after digitis.css. Override tokens, declare @font-face, add project components.
 */

/* ── Project tokens (override here, never --dt-* primitives) ────────────── */
/* :root {
  --color-brand:    #000;
  --color-surface:  #fff;
  --font-display:   'YourFont', sans-serif;
} */

/* ── @font-face — variable font + no-FOUT pattern ───────────────────────── */
/* @layer fonts {
  @font-face {
    font-family: 'YourFont';
    src: url('../fonts/YourFont[wght].woff2') format('woff2 supports variations'),
         url('../fonts/YourFont[wght].woff2') format('woff2');
    font-weight:  100 900;
    font-style:   normal;
    font-display: optional;
  }
} */
/* font-display: optional — no FOUT, uses fallback on first load, custom font on repeat visits.
   Use 'swap' only if brand font is essential even on first load (tradeoff: CLS risk). */

/* ── .topnav.scrolled — override with project colors ────────────────────── */
/* .topnav.scrolled {
  background: var(--color-surface);
  color: var(--color-on-surface);
} */

/* ── Custom cursor — uncomment + call initCursor() in app.js ────────────
.cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink, var(--color-brand));
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
  transform: translate3d(-100px,-100px,0);
  transition: width .18s ease, height .18s ease;
  will-change: transform;
}
.cursor.hot { width: 22px; height: 22px; }
── */

/* ── Horizontal carousel — uncomment if design includes one ─────────────
.carousel-container {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overflow-x: auto;
  scrollbar-width: none;
}
.carousel-container::-webkit-scrollbar { display: none; }
.carousel-item { scroll-snap-align: start; }
── */

/* ── Dark mode — set token values when design supports it ───────────────
@media (prefers-color-scheme: dark) {
  :root {
    --color-brand:      ;
    --color-surface:    ;
    --color-on-surface: ;
    --color-highlight:  ;
  }
}
── */

/* ── Container queries — use @container instead of @media for components ──
   .container already has container-type: inline-size (digitis.css).
   For custom components add: .my-component { container-type: inline-size; }
   Then: @container (min-width: 480px) { .my-component__grid { columns: 2; } }
── */