/* ============================================================ */
/* THEME-RENAISSANCE.CSS - Dressed mode                         */
/* Textures, filigree, decorative effects                       */
/* ============================================================ */
/* Activated by:  body[data-theme="renaissance"]                */
/* Deactivated:   delete body.dataset.theme                     */
/*                                                              */
/* Load order: LAST (after fonts.css, tokens.css, game.css).    */
/* All rules are scoped under [data-theme="renaissance"] so     */
/* this file is inert when the attribute is absent.             */
/*                                                              */
/* This file acts as a theme-local token layer: --ren-*         */
/* variables follow the same primitive/semantic discipline as   */
/* tokens.css but live entirely within the theme scope.         */
/* No View file needs editing to support this theme.            */
/*                                                              */
/* Board texture note: the SVG board background is managed by   */
/* BoardView.setBackgroundTexture() because SVG pattern fills   */
/* cannot be created in pure CSS. The texture rect lives inside */
/* the camera group and moves/zooms with the board content.     */
/* The vignette overlay stays fixed on the container.           */
/* ============================================================ */


/* ============================================================ */
/* THEME VARIABLES                                              */
/* ============================================================ */

body[data-theme="renaissance"] {

	/* --- Primitives --- */

	--ren-vignette-rgb: 75, 55, 30;
	--ren-gold-rgb: 195, 160, 70;
	--ren-warm-shadow-rgb: 100, 75, 45;
	--ren-wood-dark: #352a1e;
	--ren-wood-darker: #251c14;

	/* Zone background channels (for semi-transparent overlays) */
	--ren-zone-hell-rgb: 255, 245, 245;
	--ren-zone-earth-rgb: 245, 255, 245;
	--ren-zone-heaven-rgb: 245, 248, 255;

	/* alpha channel: card elements show texture in background */
	--ren-card-tint-alpha: 0.3;

	/* --- Texture paths (single place if assets move) --- */
	--ren-tex-parchment-light-256x256: url('../assets/images/textures/parchment-light-256x256.png');
	--ren-tex-parchment-aged-256x256: url('../assets/images/textures/parchment-aged-256x256.png');
	--ren-tex-parchment-aged-light-256x256: url('../assets/images/textures/parchment-aged-light-256x256.png');
	--ren-tex-parchment-1-768x1168: url('../assets/images/textures/parchment-1-784x1168.png');
	--ren-tex-old-map-256x256: url('../assets/images/textures/old-map-256x256.png');
	--ren-tex-leather-256x256: url('../assets/images/textures/leather-brown-256x256.png');
	--ren-tex-linen-128x128: url('../assets/images/textures/linen-warm-128x128.png');

/* --- Semantic texture roles (swap here, not in the rules) --- */
	--ren-tex-board:  var(--ren-tex-parchment-aged-light-256x256);
	--ren-tex-card:   var(--ren-tex-parchment-light-256x256);
	--ren-tex-panel:  var(--ren-tex-linen-128x128);
	--ren-tex-deck:   var(--ren-tex-leather-256x256);

	/* --- Composed effects --- */

	--ren-vignette-soft: radial-gradient(ellipse at center,
		transparent 50%,
		rgba(var(--ren-vignette-rgb), 0.08) 80%,
		rgba(var(--ren-vignette-rgb), 0.18) 100%);

	--ren-vignette-strong: radial-gradient(ellipse at center,
		transparent 35%,
		rgba(var(--ren-vignette-rgb), 0.10) 70%,
		rgba(var(--ren-vignette-rgb), 0.25) 100%);

	--ren-inset-light: inset 0 1px 4px rgba(var(--ren-warm-shadow-rgb), 0.12);
	--ren-inset-panel: inset 0 2px 8px rgba(var(--ren-warm-shadow-rgb), 0.10);
	--ren-gold-line: rgba(var(--ren-gold-rgb), 0.5);

	/* --- Semantic token overrides --- */

	--brand-gradient: linear-gradient(135deg,
		var(--ren-wood-dark) 0%, var(--ren-wood-darker) 100%);

	--backdrop-color: rgba(var(--ren-vignette-rgb), 0.55);
}


/* ============================================================ */
/* TIER 1 - HIGH VISIBILITY SURFACES                            */
/* ============================================================ */

/* ----- Board ----- */

/* Board SVG: solid warm bg (visible outside the hex grid area  */
/* when camera is zoomed in; the tiled texture is on the <rect> */
/* inside mainGroup, managed by BoardView.setBackgroundTexture). */
body[data-theme="renaissance"] .BoardView-bg {
	background-color: var(--bg-board);
	background-image: var(--ren-tex-board);
	background-repeat: repeat;
	background-size: 128px 128px;
}

/* Board container: gold border + vignette pseudo-element.      */
/* The vignette stays fixed to the viewport (it should NOT move */
/* with the camera, unlike the parchment texture).              */
body[data-theme="renaissance"] .board-container {
	border-color: var(--ren-gold-line);
	box-shadow:
		var(--box-shadow-sm),
		var(--ren-inset-panel);
}

body[data-theme="renaissance"] .board-container::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ren-vignette-strong);
	pointer-events: none;
	border-radius: inherit;
	z-index: var(--z-base);
}

/* ----- Card face (CardView in side panel + overlay) ----- */

body[data-theme="renaissance"] .CardView-card {
	background-color: var(--surface);
	background-image:
		var(--ren-vignette-soft),
		var(--ren-tex-card);
	background-repeat: no-repeat, repeat;
	background-size: 100% 100%, 128px 128px;
}

/* Header: single warm tint replaces all 3 NC gradients */
body[data-theme="renaissance"] .CardView-header {
	background: rgba(var(--surface-rgb), var(--ren-card-tint-alpha));
	border-bottom-style: solid;
	border-image: linear-gradient(90deg,
		transparent 5%,
		var(--ren-gold-line) 30%,
		rgba(var(--ren-gold-rgb), 0.7) 50%,
		var(--ren-gold-line) 70%,
		transparent 95%
	) 1;
}

/* Tabs */
body[data-theme="renaissance"] .CardView-tab {
	background: rgba(var(--surface-rgb), var(--ren-card-tint-alpha));
}

/* Zones */
/* Zone backgrounds: semi-transparent so card parchment         */
/* texture is visible beneath the zone color tint.              */
body[data-theme="renaissance"] .CardView-zone-hell {
	background: rgba(var(--ren-zone-hell-rgb), var(--ren-card-tint-alpha));
}
body[data-theme="renaissance"] .CardView-zone-earth {
	background: rgba(var(--ren-zone-earth-rgb), var(--ren-card-tint-alpha));
}
body[data-theme="renaissance"] .CardView-zone-heaven {
	background: rgba(var(--ren-zone-heaven-rgb), var(--ren-card-tint-alpha));
}

/* ----- Deck stack + phantom card back ----- */

body[data-theme="renaissance"] .DeckView-stack {
	background-color: var(--deck-bg-start);
	background-image:
		linear-gradient(135deg,
			rgba(var(--ren-warm-shadow-rgb), 0.15),
			rgba(var(--ren-warm-shadow-rgb), 0.0) 50%,
			rgba(var(--ren-warm-shadow-rgb), 0.2)),
		var(--ren-tex-deck);
	background-repeat: no-repeat, repeat;
	background-size: 100% 100%, 128px 128px;
	box-shadow:
		var(--box-shadow-sm),
		var(--ren-inset-light);
}

body[data-theme="renaissance"] .CardOverlayView-phantom-back {
	background-color: var(--deck-bg-start);
	background-image:
		linear-gradient(135deg,
			rgba(var(--ren-warm-shadow-rgb), 0.15),
			rgba(var(--ren-warm-shadow-rgb), 0.0) 50%,
			rgba(var(--ren-warm-shadow-rgb), 0.2)),
		var(--ren-tex-deck);
	background-repeat: no-repeat, repeat;
	background-size: 100% 100%, 128px 128px;
}

/* ============================================================ */
/* TIER 2 - MEDIUM VISIBILITY SURFACES                          */
/* ============================================================ */

/* Side panels */
body[data-theme="renaissance"] .PlayersDrawer-panel {
	background-color: var(--bg-light);
	background-image: var(--ren-tex-card);
	background-repeat: repeat;
	background-size: 128px 128px;
	box-shadow: var(--ren-inset-panel);
}

/* Individual player panel */
body[data-theme="renaissance"] .PlayerPanelView-panel {
	background-color: var(--surface);
	background-image: var(--ren-tex-panel);
	background-repeat: repeat;
	background-size: 128px 128px;
	box-shadow:
		var(--box-shadow-sm),
		var(--ren-inset-light);
}


/* ============================================================ */
/* TIER 3 - ACCENTS AND DETAILS                                 */
/* ============================================================ */

/* Card overlay container: warm gold border */
body[data-theme="renaissance"] .CardOverlayView-container {
	border-color: var(--ren-gold-line);
}

/* Card overlay footer: gold top border */
body[data-theme="renaissance"] .CardOverlayView-footer {
	border-top-color: var(--ren-gold-line);
}

/* Game footer: warm accent */
body[data-theme="renaissance"] .footer-title {
	border-top-color: var(--ren-gold-line);
}