/* === Preferans · design tokens === */

:root {
  /* ── Felt (default: Green) ─────────────────────────────── */
  --felt-base:        #0f3a2a;
  --felt-mid:         #154835;
  --felt-edge:        #07211a;
  --felt-vignette:    rgba(0, 0, 0, .55);
  --felt-grain:       rgba(255, 246, 222, .025);
  --felt-pattern:     rgba(255, 246, 222, .035);

  /* ── Surfaces (on-felt UI) ─────────────────────────────── */
  --surface-1:        #1c2a23;
  --surface-2:        #253630;
  --surface-3:        #314640;
  --surface-glass:    rgba(247, 239, 222, .045);
  --surface-line:     rgba(247, 239, 222, .14);
  --surface-line-strong: rgba(247, 239, 222, .28);

  /* ── Ink (text) ────────────────────────────────────────── */
  --ink-1:            #f4ecd6;
  --ink-2:            #d6caa6;
  --ink-3:            #8e8970;
  --ink-mute:         #5d5a4d;

  /* ── Brass / antique gold accents ──────────────────────── */
  --brass-1:          #d8b674;
  --brass-2:          #b08540;
  --brass-3:          #efd9a4;
  --brass-shadow:     #6b4a1c;
  --accent-glow:      rgba(232, 196, 124, .55);

  /* ── Suits (default 2-color) ───────────────────────────── */
  --suit-red:         #b13029;
  --suit-red-deep:    #7e1f1a;
  --suit-black:       #14110d;
  --suit-ink:         #1d1814;

  /* ── Cards ─────────────────────────────────────────────── */
  --card-paper:       #f7efdc;
  --card-paper-edge:  #e6d5a8;
  --card-paper-shadow: #c2ad7a;
  --card-back-bg:     #5d1a20;
  --card-back-pattern: #a07546;

  /* ── States ────────────────────────────────────────────── */
  --danger:           #c0463c;
  --success:          #6f9d5b;
  --warn:             #d8a14a;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-card:      0 1px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.4);
  --shadow-card-lift: 0 2px 0 rgba(0,0,0,.45), 0 18px 36px rgba(0,0,0,.5);
  --shadow-elevated:  0 24px 50px rgba(0,0,0,.55), 0 6px 12px rgba(0,0,0,.35);
  --shadow-inset-felt: inset 0 0 140px rgba(0,0,0,.55);
  --shadow-brass:     0 0 0 1px var(--brass-shadow), 0 1px 0 var(--brass-3) inset, 0 -1px 0 var(--brass-shadow) inset;

  /* ── Card geometry ─────────────────────────────────────── */
  --card-w-xs:        38px;
  --card-w-sm:        56px;
  --card-w-md:        82px;
  --card-w-lg:        118px;
  --card-w-xl:        160px;
  --card-ar:          1.42;
  --card-radius:      7px;
  --card-radius-lg:   10px;

  /* ── Spacing ───────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ── Radii ─────────────────────────────────────────────── */
  --r-xs: 3px; --r-sm: 5px; --r-md: 9px; --r-lg: 14px; --r-xl: 22px;
  --r-pill: 999px;

  /* ── Type ──────────────────────────────────────────────── */
  --f-display: "Cormorant Garamond", "Source Serif Pro", Georgia, serif;
  --f-ui:      "Manrope", "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(.2,.7,.3,1);
  --ease-spring: cubic-bezier(.34,1.5,.64,1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ═══════════ Table themes ═══════════ */

[data-table="wine"] {
  --felt-base:        #3a141d;
  --felt-mid:         #4d1c27;
  --felt-edge:        #1d0a10;
  --felt-vignette:    rgba(0, 0, 0, .6);
  --card-back-bg:     #1a1c34;
  --card-back-pattern: #c4a25e;
}

[data-table="slate"] {
  --felt-base:        #222930;
  --felt-mid:         #2c343d;
  --felt-edge:        #131820;
  --felt-vignette:    rgba(0, 0, 0, .6);
  --card-back-bg:     #1c3140;
  --card-back-pattern: #b89a5e;
}

/* ═══════════ Light mode ═══════════ */

[data-mode="light"] {
  --felt-base:        #d8c79a;
  --felt-mid:         #e3d5ae;
  --felt-edge:        #b8a473;
  --felt-vignette:    rgba(91, 65, 18, .25);
  --felt-grain:       rgba(70, 45, 10, .03);
  --felt-pattern:     rgba(70, 45, 10, .06);

  --surface-1:        #fbf4e0;
  --surface-2:        #f3e9cc;
  --surface-3:        #e8dcb6;
  --surface-glass:    rgba(40, 26, 6, .05);
  --surface-line:     rgba(40, 26, 6, .15);
  --surface-line-strong: rgba(40, 26, 6, .35);

  --ink-1:            #2a1f10;
  --ink-2:            #4a3a20;
  --ink-3:            #7a6a4a;
  --ink-mute:         #a9986e;

  --shadow-card:      0 1px 0 rgba(60,40,10,.18), 0 6px 14px rgba(60,40,10,.18);
  --shadow-elevated:  0 18px 40px rgba(60,40,10,.22), 0 4px 10px rgba(60,40,10,.16);
  --shadow-inset-felt: inset 0 0 120px rgba(91,65,18,.22);
}

[data-table="wine"][data-mode="light"]  { --felt-base:#cfa9a8; --felt-mid:#dcb9b8; --felt-edge:#a87f7e; }
[data-table="slate"][data-mode="light"] { --felt-base:#c8cdd2; --felt-mid:#d7dce0; --felt-edge:#a0a6ad; }

/* ═══════════ 4-color suits ═══════════ */

[data-suits="4color"] {
  --suit-spade:   var(--suit-black);
  --suit-club:    #2a6e3f;
  --suit-diamond: #1f5fb8;
  --suit-heart:   var(--suit-red);
}

/* ═══════════ Felt surface ═══════════ */

.felt {
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%,
      var(--felt-mid) 0%,
      var(--felt-base) 55%,
      var(--felt-edge) 100%),
    var(--felt-base);
  position: relative;
}

.felt::before {
  /* Subtle damask cross-hatch — almost imperceptible */
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, var(--felt-pattern) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, var(--felt-pattern) 0 1px, transparent 1px 14px);
  opacity: .55;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.felt::after {
  /* Grain overlay */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--felt-grain) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  mix-blend-mode: overlay;
  box-shadow: var(--shadow-inset-felt);
}