/* ==========================================================================
   Mahjong Pa More — Design Tokens
   Art direction per PRD §12. The handaan mahjong table on a warm tropical
   evening: Baize Green felt, Capiz Bone tiles, Marigold Gold glow, Lacquer
   Red for win moments, Bamboo green for progression, banig weave texture.
   Do NOT introduce the generic AI cream/terracotta defaults.
   ========================================================================== */

:root {
  /* --- Core palette (PRD color tokens) --- */
  --baize:        #0C3B2C; /* primary felt surface & app background */
  --baize-deep:   #06231A; /* darkest felt / vignette core */
  --baize-lift:   #17553F; /* raised felt highlight */
  --capiz:        #EFE7D5; /* tile faces, light cards */
  --marigold:     #E0A42C; /* primary accent: Barya, CTAs, parol glow */
  --gold-hi:      #F7CF69; /* gold highlight */
  --gold-lo:      #B9821A; /* gold shadow */
  --lacquer:      #BE3A2B; /* prosperity / win accent (used sparingly) */
  --bamboo:       #2F8A63; /* secondary green: success, casual, progression */
  --bamboo-hi:    #3AA277;
  --teal:         #1C6E7E; /* dots-suit accent / info */
  --ink:          #1B1A16; /* text on light surfaces */

  /* --- Text on dark felt --- */
  --bone:         #EDE3CE; /* primary text on dark */
  --bone-bright:  #F2E7CE; /* headings on dark */
  --bone-dim:     rgba(237, 227, 206, 0.58);
  --bone-faint:   rgba(237, 227, 206, 0.40);

  /* --- Signature gradients --- */
  --grad-gold:     linear-gradient(180deg, #F3BE4F, #E0A42C 55%, #C6871B);
  --grad-gold-v:   linear-gradient(0deg, #B9821A 0%, #E0A42C 42%, #F7CF69 100%);
  --grad-gold-sheen: linear-gradient(90deg, #E0A42C, #F7CF69);
  --grad-bamboo:   linear-gradient(180deg, #3AA277, #2F8A63);
  --grad-lacquer:  linear-gradient(180deg, #D2503E, #BE3A2B 60%, #9E2C20);

  /* Felt surfaces (baked warmth + vignette handled per-surface) */
  --felt-app:      radial-gradient(120% 130% at 26% -12%, #1A5C44 0%, #0C3B2C 48%, #06231A 100%);
  --felt-card:     radial-gradient(130% 100% at 20% -10%, #17553F, #0C3B2C 58%, #06231A);
  --felt-table:    radial-gradient(ellipse at 50% 40%, #2FA377 0%, #17825C 34%, #0C3B2C 68%, #0a3122 100%);
  --panel:         linear-gradient(155deg, #26221c, #0c0b09);
  --panel-warm:    radial-gradient(circle at 26% -8%, #221b12 0%, #0f0d09 55%, #080705 100%);

  /* Banig woven-mat texture — warms large dark surfaces (PRD §12) */
  --banig: repeating-linear-gradient(45deg, rgba(255,255,255,0.016) 0 7px, rgba(0,0,0,0.02) 7px 14px);

  /* Hairlines / borders */
  --line-gold:     rgba(224, 164, 44, 0.14);
  --line-gold-2:   rgba(224, 164, 44, 0.40);
  --line-soft:     rgba(255, 255, 255, 0.06);

  /* --- Typography (PRD §12) --- */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-ui:      'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-cjk:     'Noto Serif SC', 'Songti SC', 'Songti TC', serif;
  --nums:         'Instrument Sans', system-ui, sans-serif; /* used with tabular figures */

  /* --- Radii / elevation --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-card:  0 24px 60px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(224,164,44,0.10);
  --shadow-pop:   0 40px 90px rgba(0,0,0,0.55);
  --glow-gold:    0 0 24px rgba(224,164,44,0.45);

  /* Layout */
  --rail-w: 84px;
  --safe-max: 1120px;
}

/* Colorblind-safe suit accents (shape + colour, never colour alone — PRD §13) */
:root {
  --suit-dots:   #1C6E7E; /* Bilog / circles  */
  --suit-bamboo: #2F8A63; /* Kawayan / sticks */
  --suit-chars:  #BE3A2B; /* Caracteres 1 & 9 */
  --suit-chars2: #1C6E7E; /* Caracteres 2–8   */
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}