/* GrinGo Pay — Redesign tokens: "Tropical Modernist, paper-light" */
:root {
  /* surfaces */
  --paper: #F4F1E8;        /* warm sand paper */
  --paper-hi: #FCFAF4;     /* raised paper */
  --dark: #071410;         /* scanner / camera ink */

  /* ink */
  --ink: #0A2B22;          /* deep teal-green ink — all transactional text */
  --ink-2: #33544A;        /* secondary, still sunlight-strong */
  --ink-3: #62796F;        /* non-transactional labels only */
  --teal-ink: #04382C;     /* text ON teal fills */

  /* brand */
  --teal: #00D4AA;
  --teal-deep: #009B7A;
  --ocean: #4ECDC4;
  --sunset: #FF9F43;
  --coral: #FF6B6B;
  --violet: #A78BFA;

  --shaka: linear-gradient(180deg, #00D4AA, #009B7A); /* logo + success ONLY */

  --hairline: rgba(10, 43, 34, 0.14);
  --hairline-strong: rgba(10, 43, 34, 0.28);

  /* the Shaka cut — every rounded surface keeps ONE near-hard corner */
  --r-btn: 26px 26px 26px 6px;
  --r-card: 24px 24px 24px 6px;
  --r-chip: 12px 12px 12px 3px;
  --r-sheet: 44px 14px 0 0;

  --disp: 'Bricolage Grotesque', 'Noto Sans Thai', 'Noto Sans Devanagari', sans-serif;
  --ui: 'Hanken Grotesk', 'Noto Sans Thai', 'Noto Sans Devanagari', sans-serif;
}

/* type scale — extreme weight contrast is the signature */
.rd-display   { font-family: var(--disp); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; font-variant-numeric: tabular-nums lining-nums; }
.rd-h1        { font-family: var(--disp); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.rd-h3        { font-family: var(--ui);   font-weight: 600; line-height: 1.25; }
.rd-body      { font-family: var(--ui);   font-weight: 400; line-height: 1.45; }
.rd-label     { font-family: var(--ui);   font-weight: 600; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; }
.rd-num       { font-variant-numeric: tabular-nums lining-nums; }

/* motion — fast + functional */
@keyframes rd-rise    { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes rd-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-sheet   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes rd-scan    { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(228px); opacity: 0; } }
@keyframes rd-spin    { to { transform: rotate(360deg); } }
@keyframes rd-burst   { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes rd-stamp   { 0% { transform: scale(1.24); opacity: 0; } 60% { transform: scale(0.97); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rd-pop     { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rd-rock    { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes rd-rock-soft { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes rd-marquee { to { transform: translateX(calc(-50% - 4px)); } }
@keyframes rd-toast   { from { transform: translateY(-84px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }