:root{
  /* =========================================================
     SNEHAKOOTA — SHARED VISUAL FOUNDATION
     Stage 2D-1 / 2D-2
     ---------------------------------------------------------
     This file owns genuinely shared visual tokens only.
     Page-specific styling remains in the individual page/component
     stylesheet until that component is deliberately migrated.
     ========================================================= */

  /* ---- Core SnehaKoota palette ---- */
  --sky-top:    #FFF6E8;
  --sky-bottom: #FDE7C8;
  --marigold:   #E29B3F;
  --rust:       #B5502E;
  --banyan:     #2F5233;
  --ink:        #2B2118;
  --ink-soft:   #6B5C4C;
  --rose:       #E07A66;
  --line-idle:  rgba(43,33,24,0.16);

  /* ---- Shared surfaces / interaction ---- */
  --sk-edge-binding: #F5D9AE;
  --sk-rust-soft: rgba(181,80,46,0.10);
  --sk-rust-faint: rgba(181,80,46,0.08);
  --sk-rust-border: rgba(181,80,46,0.25);
  --sk-overlay: rgba(43,33,24,0.38);
  --sk-game-overlay: rgba(43,33,24,0.28);

  /* =========================================================
     STAGE 2D-1 — SHARED TYPOGRAPHY TOKENS
     ========================================================= */
  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-kannada: 'Noto Sans Kannada', sans-serif;

  /* ---- Shared component geometry ---- */
  --sk-radius-sm: 8px;
  --sk-radius-md: 12px;
  --sk-radius-lg: 20px;
  --sk-radius-pill: 999px;

  /* ---- Shared elevation ---- */
  --sk-shadow-soft: 0 3px 8px rgba(43,33,24,0.18);
  --sk-shadow-panel: 2px 0 18px rgba(0,0,0,0.18);
  --sk-shadow-game: 0 10px 30px rgba(43,33,24,0.22);

  /* ---- Mobile-first shared layout primitives ---- */
  --sk-safe-edge: 22px;
  --sk-edge-width: 22px;
  --sk-panel-max-width: 300px;
  --sk-touch-target: 44px;
  --sk-mobile-gutter: clamp(16px, 5vw, 28px);
  --sk-content-max: 640px;
  --sk-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sk-safe-top: env(safe-area-inset-top, 0px);
}

/* =========================================================
   STAGE 1D — MOBILE-FIRST SHARED PRIMITIVES
   ---------------------------------------------------------
   Retained from the earlier foundation stage.
   These are deliberately generic and do not restyle existing
   page-specific components.
   ========================================================= */
*, *::before, *::after{
  box-sizing:border-box;
}

img, svg, video, canvas{
  max-width:100%;
}

button, a, input, select, textarea{
  -webkit-tap-highlight-color:transparent;
}

@media (max-width:480px){
  :root{
    --sk-mobile-gutter:16px;
  }
}

@media (min-width:721px){
  :root{
    --sk-mobile-gutter:28px;
  }
}
/* =========================================================
   SHARED GLOBAL NOTICE
   Used for short-lived site-wide confirmations.
   ========================================================= */
.ska-global-notice{
  position:fixed;
  top:max(16px, var(--sk-safe-top));
  left:50%;
  transform:translate(-50%, -10px);
  z-index:10000;
  max-width:min(calc(100vw - 32px), 420px);
  padding:11px 16px;
  border:1px solid var(--sk-rust-border);
  border-radius:var(--sk-radius-pill);
  background:rgba(255,246,232,0.96);
  color:var(--ink);
  box-shadow:var(--sk-shadow-soft);
  font:500 14px/1.35 var(--font-body);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity 180ms ease, transform 180ms ease;
}

.ska-global-notice.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}

/* =========================================================
   STAGE 2D-2 — STYLE OWNERSHIP CONTRACT
   ---------------------------------------------------------
   This is an architecture rule, not a visual override.

   1. theme.css
      Owns shared visual tokens and genuinely generic primitives.

   2. navigation.css
      Owns navigation visuals only.

   3. account.css
      Owns the account widget visuals only.

   4. Individual page <style> blocks / page CSS
      Own page-specific layout, artwork, content presentation and
      special effects. A page may use shared tokens without moving
      its unique rules into theme.css.

   5. Component-local CSS
      A reusable component may keep its own stylesheet when its rules
      are not genuinely site-wide. Reuse is preferred over duplication,
      but centralisation is not a goal by itself.

   6. Safe migration rule
      Do not move or delete page-specific CSS merely because a similar
      selector exists in a shared stylesheet. First verify that the
      selector is genuinely shared and that the migration causes no
      visual or behavioural change on the owning page.

   7. Isolation rule
      A change to a page-specific selector must not be expected to alter
      another page. A change to a shared token may affect multiple pages
      intentionally, so shared-token changes must be treated as global
      visual changes.

   8. Protected page assets
      The index/home road/path SVG animation, temporary game launcher,
      and Supabase/account integration are not part of the theme layer.
      They remain locally owned until a later, explicit migration.
   ========================================================= */