/* ==========================================================================
   CLAYNEXT CORE - the material. Real claymorphism: moulded, toy-like, chunky.
   One token set for the landing (cn-land.css) and the app (cn-app.css).

   Material recipe
     outline : 3px deep ink (lighter, ink-tinted rim in dark mode)
     depth   : HARD offset shadow, no blur (5px 5px 0 ink)
     clay    : soft inner highlight on top + faint inner shade at the bottom
     press   : the element moves down-right INTO its own shadow
   Colour
     ground  : warm cream + a faint dot mat (never pure white)
     tiles   : six pastels colour-code platforms and stats
     primary : ALWAYS the admin accent, var(--nv-accent) - never pinned here
   Type      : Fredoka (display, max 700) + Nunito (UI), tabular money
   ========================================================================== */
:root{
  --cn-acc: var(--nv-accent, #E0412B);
  --cn-acc-hi: color-mix(in srgb, var(--cn-acc) 80%, #fff);
  --cn-acc-lo: color-mix(in srgb, var(--cn-acc) 84%, #000);
  --cn-acc-soft: color-mix(in srgb, var(--cn-acc) 13%, var(--cn-card));
  --cn-acc-ink: color-mix(in srgb, var(--cn-acc) 62%, #1a1020);
  --cn-acc-text: color-mix(in srgb, var(--cn-acc) 88%, #1a1020);

  --cn-ground: #FBF3E6;
  --cn-ground-2: #F6EAD6;
  --cn-dot: rgba(42,35,64,.075);
  --cn-card: #FFFCF6;
  --cn-card-2: #FFF6E9;
  --cn-field: #FFFFFF;

  --cn-ink: #2A2340;          /* outlines + hard shadows */
  --cn-rim: #2A2340;          /* outline colour (dark mode lifts it) */
  --cn-drop: #2A2340;         /* hard shadow colour */
  --cn-text: #221B35;
  --cn-soft: #463F5E;
  --cn-muted: #5E5775;
  --cn-line: rgba(42,35,64,.14);
  --cn-line-2: rgba(42,35,64,.08);

  /* pastel tiles: bg + deep ink for the glyph/text that sits on them */
  --p-peach: #FFD7C2;  --p-peach-d: #A2401A;
  --p-pink:  #FFCFE2;  --p-pink-d:  #A0245A;
  --p-lemon: #FFEDA3;  --p-lemon-d: #765600;
  --p-mint:  #C2F0D6;  --p-mint-d:  #15704A;
  --p-blue:  #C9E5FF;  --p-blue-d:  #1D5C9E;
  --p-lilac: #DFD5FF;  --p-lilac-d: #5A3EB3;

  --cn-ok: #11703A;   --cn-ok-bg: #D5F5E1;
  --cn-warn: #7A4F00; --cn-warn-bg: #FFF0BF;
  --cn-bad: #B42424;  --cn-bad-bg: #FFDCDC;
  --cn-info: #1D5C9E; --cn-info-bg: #D9ECFF;

  --cn-bw: 3px;               /* outline width */
  --cn-bw-sm: 2px;
  --cn-r-xl: 32px; --cn-r-lg: 26px; --cn-r: 20px; --cn-r-sm: 14px; --cn-r-xs: 10px;

  --cn-hi: inset 0 3px 0 rgba(255,255,255,.75);          /* moulded top light */
  --cn-lo: inset 0 -4px 0 rgba(42,35,64,.06);             /* moulded bottom shade */
  --cn-sh: var(--cn-hi), var(--cn-lo), 5px 5px 0 var(--cn-drop);
  --cn-sh-sm: var(--cn-hi), var(--cn-lo), 3px 3px 0 var(--cn-drop);
  --cn-sh-lg: var(--cn-hi), var(--cn-lo), 8px 8px 0 var(--cn-drop);
  --cn-sh-press: inset 0 2px 0 rgba(42,35,64,.10), 1px 1px 0 var(--cn-drop);
  /* ring-shadows: outline + hard shadow with NO border (for token-driven
     surfaces we cannot add a border to without touching their templates) */
  --cn-ring: 0 0 0 2.5px var(--cn-rim);
  --cn-ring-sh: 0 0 0 2.5px var(--cn-rim), 4px 4px 0 2.5px var(--cn-drop);
  --cn-ring-sh-sm: 0 0 0 2px var(--cn-rim), 2px 2px 0 2px var(--cn-drop);

  --cn-btn-hi: inset 0 2px 0 rgba(255,255,255,.38), inset 0 -4px 0 rgba(0,0,0,.16);
  --cn-grad: linear-gradient(180deg, var(--cn-acc-hi), var(--cn-acc) 62%);

  --cn-f-head: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --cn-f-ui: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cn-e-out: cubic-bezier(.215,.61,.355,1);
  --cn-e-spring: cubic-bezier(.34,1.56,.64,1);
  --cn-t: .16s;
}
html.nv-dark{
  color-scheme:dark;
  --cn-acc-lit: color-mix(in srgb, var(--nv-accent, #E0412B) 72%, #fff);
  --cn-acc-soft: color-mix(in srgb, var(--cn-acc) 22%, var(--cn-card));
  --cn-acc-ink: var(--cn-acc-lit);
  --cn-acc-text: var(--cn-acc-lit);

  --cn-ground: #1B1726;
  --cn-ground-2: #211C2E;
  --cn-dot: rgba(255,255,255,.045);
  --cn-card: #272136;
  --cn-card-2: #302942;
  --cn-field: #211B2F;

  --cn-ink: #08060D;
  --cn-rim: #7F74A8;          /* 3.6:1 on the card - the outline stays visible */
  --cn-drop: #08060D;
  --cn-text: #F5F0FF;
  --cn-soft: #D3CAEA;
  --cn-muted: #A99FCB;
  --cn-line: rgba(255,255,255,.14);
  --cn-line-2: rgba(255,255,255,.07);

  --p-peach: #4A3029;  --p-peach-d: #FFC2A3;
  --p-pink:  #4A2A3C;  --p-pink-d:  #FFB3D2;
  --p-lemon: #45402A;  --p-lemon-d: #FFE27A;
  --p-mint:  #213F33;  --p-mint-d:  #9CEBC0;
  --p-blue:  #23364D;  --p-blue-d:  #A8D3FF;
  --p-lilac: #332B52;  --p-lilac-d: #CBBDFF;

  --cn-ok: #6EE7A0;   --cn-ok-bg: #1E3A2B;
  --cn-warn: #FFD166; --cn-warn-bg: #3D3220;
  --cn-bad: #FF9B9B;  --cn-bad-bg: #432527;
  --cn-info: #A8D3FF; --cn-info-bg: #1F3147;

  --cn-hi: inset 0 2px 0 rgba(255,255,255,.07);
  --cn-lo: inset 0 -4px 0 rgba(0,0,0,.22);
  --cn-sh-press: inset 0 2px 0 rgba(0,0,0,.3), 1px 1px 0 var(--cn-drop);
  --cn-btn-hi: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -4px 0 rgba(0,0,0,.25);
}

/* ---------- shared clay primitives (namespaced, never global) ---------- */
.cn-clay{background:var(--cn-card);border:var(--cn-bw) solid var(--cn-rim);border-radius:var(--cn-r-lg);box-shadow:var(--cn-sh)}
.cn-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cn-h{font-family:var(--cn-f-head);font-weight:600;letter-spacing:-.01em}

.cn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 22px;border:var(--cn-bw) solid var(--cn-rim);border-radius:16px;
  background:var(--cn-card);color:var(--cn-text);font-family:var(--cn-f-head);font-weight:600;font-size:16px;letter-spacing:.005em;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;
  box-shadow:var(--cn-hi),var(--cn-lo),4px 4px 0 var(--cn-drop);transition:transform var(--cn-t) var(--cn-e-out),box-shadow var(--cn-t) var(--cn-e-out),background-color var(--cn-t)}
.cn-btn.pri{background:var(--cn-grad);background-color:var(--cn-acc);color:#fff;box-shadow:var(--cn-btn-hi),4px 4px 0 var(--cn-drop)}
.cn-btn.pri i{color:#fff}
.cn-btn:active{transform:translate(3px,3px);box-shadow:var(--cn-sh-press)}
@media (hover:hover) and (pointer:fine){
  .cn-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--cn-hi),var(--cn-lo),5px 5px 0 var(--cn-drop)}
  .cn-btn.pri:hover{box-shadow:var(--cn-btn-hi),5px 5px 0 var(--cn-drop)}
  .cn-btn:active{transform:translate(3px,3px);box-shadow:var(--cn-sh-press)}
}
.cn-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--cn-acc) 55%,transparent);outline-offset:3px}

.cn-coin{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;border:var(--cn-bw-sm) solid var(--cn-rim);font-size:18px;box-shadow:var(--cn-hi),2px 2px 0 var(--cn-drop)}
.t-peach{background:var(--p-peach);color:var(--p-peach-d)} .t-pink{background:var(--p-pink);color:var(--p-pink-d)}
.t-lemon{background:var(--p-lemon);color:var(--p-lemon-d)} .t-mint{background:var(--p-mint);color:var(--p-mint-d)}
.t-blue{background:var(--p-blue);color:var(--p-blue-d)}   .t-lilac{background:var(--p-lilac);color:var(--p-lilac-d)}
.t-acc{background:var(--cn-grad);background-color:var(--cn-acc);color:#fff}

@media (prefers-reduced-motion:reduce){
  .cn-btn,.cn-coin{transition:none}
  .cn-btn:hover,.cn-btn:active{transform:none}
}