/*
 * Design tokens — single source of truth for all blocks and templates.
 * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log).
 *
 * Direction: "Casino Royale" SKIN (new-theme branch) — warm off-white layout,
 * deep casino-green chrome (header/footer), royale-red heading accents,
 * gold CTAs. Same structure as the Candy Court skin on master; ONLY token
 * values differ. Fonts self-hosted (GDPR).
 * NOTE: variable NAMES are shared with master (--sn-purple holds the green
 * chrome, --sn-pink holds the red accent) — do not rename, blocks depend on them.
 */

/* ---------- Fonts (self-hosted, latin subset) ---------- */

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/barlow-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/barlow-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-700.woff2') format('woff2');
}

/* ---------- Tokens ---------- */

:root {
	/* Surfaces — light and airy */
	--sn-bg:            #F7F7F3;   /* page background */
	--sn-surface:       #FFFFFF;   /* cards / panels */
	--sn-surface-2:     #EFEFE7;   /* zebra rows, toplist rows, input bg */
	--sn-border:        #E2E2D6;

	/* Text */
	--sn-heading:       #1C2B21;
	--sn-text:          #384A3E;
	--sn-text-muted:    #7C8577;

	/* Brand */
	--sn-primary:       #E7B008;   /* gold — the ONLY action colour (Play Now CTAs) */
	--sn-primary-hover: #F7C948;
	--sn-primary-dark:  #2A2000;   /* text ON gold buttons */
	--sn-accent:        #0E7A4E;   /* emerald — brand & informational: links, step numbers, table headers */
	--sn-pink:          #C81E3C;   /* royale red — heading accents, small highlights */
	--sn-gold:          #F5A80C;   /* star ratings */

	/* Green chrome (header/footer) — kept under the --sn-purple names */
	--sn-purple:        #14532D;
	--sn-purple-2:      #1E7A44;   /* chrome gradient end */
	--sn-purple-deep:   #0B3B1F;   /* footer body */
	--sn-purple-tint:   rgba(20, 83, 45, .08);
	--sn-on-chrome:     #FFFFFF;   /* text/icons on the green chrome */

	/* Semantic (callouts etc.) — darkened for light surfaces */
	--sn-info:          #0284C7;
	--sn-tip:           #16A34A;
	--sn-warning:       #D97706;
	--sn-danger:        #DC2626;

	/* Tints for callout backgrounds (soft pastels on white) */
	--sn-info-tint:     rgba(2, 132, 199, .08);
	--sn-tip-tint:      rgba(22, 163, 74, .08);
	--sn-warning-tint:  rgba(217, 119, 6, .10);
	--sn-danger-tint:   rgba(220, 38, 38, .07);
	--sn-primary-tint:  rgba(231, 176, 8, .14);

	/* Typography */
	--sn-font:         'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sn-font-display: 'Poppins', 'Barlow', -apple-system, sans-serif;
	--sn-fs-xs: .8125rem;  /* 13px meta */
	--sn-fs-sm: .9375rem;  /* 15px small */
	--sn-fs-md: 1.0625rem; /* 17px body */
	--sn-fs-lg: 1.375rem;  /* h3 */
	--sn-fs-xl: 1.875rem;  /* h2 */
	--sn-fs-2xl: 2.5rem;   /* h1 */
	--sn-lh-body: 1.7;
	--sn-lh-heading: 1.25;

	/* Spacing scale (multiples of 4) */
	--sn-sp-1: .25rem;  --sn-sp-2: .5rem;  --sn-sp-3: .75rem; --sn-sp-4: 1rem;
	--sn-sp-6: 1.5rem;  --sn-sp-8: 2rem;   --sn-sp-12: 3rem;  --sn-sp-16: 4rem;

	/* Shape */
	--sn-radius:     12px;   /* cards, panels, images */
	--sn-radius-sm:  8px;    /* buttons, inputs, chips */
	--sn-radius-pill: 999px; /* pills/badges */
	--sn-shadow:     0 10px 30px rgba(32, 27, 51, .10);
	--sn-glow:       0 6px 18px rgba(231, 176, 8, .40);

	/* Layout */
	--sn-container:  1160px;  /* outer container */
	--sn-content:    820px;   /* article/content column */
}