/* ============================================================================
 * CQ DEPTH — TOKENS  (palette + type/scale/density + the felt canvas)
 * ----------------------------------------------------------------------------
 * Ported verbatim from the games.cqnexus.com design system (theme/base.css
 * root + theme/dark.css + theme/light.css). This is the single source of truth
 * for every color/type value; theme.json references these vars so the WP editor
 * picks up the same tokens. The palette flips on the [data-theme] attribute
 * (dark = default). Never hardcode a hex in a component — reference a token.
 * ========================================================================== */

/* Fonts — quick start via Google Fonts. FOR PRODUCTION / GDPR: bundle these as
   woff2 through the WP Font Library (Appearance → Editor → Styles → Fonts) or a
   local @font-face, then delete this @import. The families are registered in
   theme.json and resolve through the --f-* tokens below regardless. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@600;700&display=swap');

:root {
  /* --- Type families ---------------------------------------------------- */
  --f-display: 'Oswald', 'Helvetica Neue', sans-serif;   /* titles */
  --f-ui:      'Nunito', 'Helvetica Neue', sans-serif;   /* body */
  --f-mono:    'JetBrains Mono', 'SF Mono', monospace;   /* labels, numbers, buttons */
  --f-head:    var(--f-display);

  /* --- Type scale ------------------------------------------------------- */
  --fs-2xs: 11px;
  --fs-xs:  13px;
  --fs-sm:  15px;
  --fs-md:  17px;
  --fs-lg:  20px;
  --fs-xl:  24px;

  /* --- Control density (fields + buttons tighten together) -------------- */
  --ctl-pad: 8px 11px;
  --ctl-fs:  var(--fs-sm);
  --btn-pad-sm: 6px 11px;  --btn-fs-sm: var(--fs-xs);
  --btn-pad:    8px 14px;  --btn-fs:    var(--fs-xs);
  --btn-pad-lg: 10px 18px; --btn-fs-lg: var(--fs-sm);

  /* --- Radii ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- Theme-agnostic surfaces + scrims --------------------------------- */
  --scrim:        rgba(0, 0, 0, 0.66);
  --scrim-soft:   rgba(0, 0, 0, 0.12);
  --surface-menu: #0d0d0d;   /* 95% black — footer / menu chrome, both themes */

  /* --- Player-tier accents (optional; badges / author names) ------------ */
  --tier-bronze: #b07a4a;
  --tier-silver: #b8c0c8;
  --tier-gold:   #d9a441;
  --tier-plat:   #7fd4d0;

  /* --- Entry-animation shorthands --------------------------------------- */
  --anim-page-in:  page-in  320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --anim-card-in:  card-in  280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  --anim-hero-in:  hero-in  360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes card-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes hero-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  :root { --anim-page-in: none; --anim-card-in: none; --anim-hero-in: none; }
}

/* ----------------------------------------------------------------------------
 * DARK — BLACK felt with an emerald cross-cut (the DEFAULT). Set on bare :root too so the felt paints
 * before any JS assigns data-theme.
 * -------------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  --page:       #050706;
  --felt:       #070908;   /* black is the table */
  --felt-hi:    #0c120f;
  --felt-edge:  #010302;
  --felt-pit-light: rgba(52, 211, 153, 0.16);   /* emerald pit-light */
  --felt-thatch:    rgba(27, 122, 70, 0.34);    /* emerald cross-cut */

  --surface-ink:      #050706;
  --surface-recessed: #080b0a;
  --surface-raised:   #0d1210;
  --surface-float:    #131a17;
  --surface-hi:       #1a241f;

  --bevel-hi: rgba(226, 197, 120, 0.28);
  --bevel-lo: rgba(0, 0, 0, 0.45);
  --field-edge: rgba(255, 255, 255, 0.12);
  --hair:     rgba(255, 255, 255, 0.06);
  --shadow-raised: 0 6px 18px rgba(0, 0, 0, 0.42), inset 0 1px 0 var(--hair);
  --shadow-float:  0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--hair);
  --shadow-inset:  inset 0 2px 5px rgba(0, 0, 0, 0.55);

  --gold:      #e2c578;
  --gold-2:    #efd89a;
  --gold-deep: #8a6e2c;
  --ink:       #1a1407;
  --good:      #34d399;
  --danger:    #c4544a;
  --info:      #4a90b8;

  --select:     var(--gold);   /* gold stays the primary action; --good is the emerald */
  --focus-ring: rgba(226, 197, 120, 0.20);

  --t1: #f3f7f4;
  --t2: #a8b4ad;
  --t3: #6b7a72;
  --t4: #454f4a;
}

/* ----------------------------------------------------------------------------
 * LIGHT — near-white daylight. Same elevation model, light values; gold
 * deepened to brass, PURPLE selection accent.
 * -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --page:       #f5f5f5;
  --felt:       #f2f2f4;
  --felt-hi:    #ffffff;
  --felt-edge:  #e6e6ec;
  --felt-pit-light: rgba(255, 241, 205, 0.7);
  --felt-thatch:    rgba(110, 100, 138, 0.05);

  --surface-ink:      #211d2b;
  --surface-recessed: #dcd7e4;
  --surface-raised:   #ffffff;
  --surface-float:    #ffffff;
  --surface-hi:       #ffffff;

  --bevel-hi: rgba(255, 255, 255, 0.95);
  --bevel-lo: rgba(90, 80, 110, 0.22);
  --field-edge: var(--bevel-lo);
  --hair:     rgba(90, 80, 110, 0.12);
  --shadow-raised: 0 4px 14px rgba(70, 60, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-float:  0 12px 30px rgba(70, 60, 90, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-inset:  inset 0 2px 5px rgba(70, 60, 95, 0.24);

  --gold:      #b0851f;
  --gold-2:    #d4ac4c;
  --gold-deep: #835f12;
  --ink:       #fff8e6;
  --good:      #3e9a4f;
  --danger:    #bb3b34;
  --info:      #2f77a0;

  --select:     #6d4c9c;
  --focus-ring: rgba(109, 76, 156, 0.22);

  --t1: #2a2533;
  --t2: #544d61;
  --t3: #8b8397;
  --t4: #b4adbf;
}

/* ----------------------------------------------------------------------------
 * THE CANVAS — theme-wide felt: a woven thatch + a pit-light spotlight from
 * above + a depth vignette. Every layer is token-driven, so light mode gets the
 * same TYPE of treatment with its own values.
 *
 * DIVI: this is OPT-IN — add the `.cq-felt` class to a Divi Section (or apply it
 * to <body> via Divi → Theme Options → Custom CSS: `body { }` copying the rule
 * below) so it never overrides an existing site's background by default.
 * -------------------------------------------------------------------------- */
.cq-felt {
  background-color: var(--felt);
  background-image:
    radial-gradient(78% 56% at 50% -6%, var(--felt-pit-light) 0%, transparent 58%),
    repeating-linear-gradient(45deg,  var(--felt-thatch) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, var(--felt-thatch) 0 1px, transparent 1px 5px),
    radial-gradient(135% 112% at 50% -8%, var(--felt-hi) 0%, var(--felt) 46%, var(--felt-edge) 100%);
  background-attachment: fixed;
  color: var(--t1);
}
/* Explicitly opt into the depth body font on a region (Divi controls fonts). */
.cq-type { font-family: var(--f-ui); color: var(--t1); }