/* ==========================================================================
   Minesweeper.si - Design tokens (single source of truth)
   --------------------------------------------------------------------------
   RULES
   1. Page and component CSS must consume the SEMANTIC tokens below.
      Never reference the raw grayscale ramp directly.
   2. To rebrand the whole site, edit only these four values in :root and
      their counterparts inside [data-theme="dark"]:
          --color-primary  --color-primary-hover
          --color-primary-light  --color-primary-contrast
   3. Optional brand skins are exposed as .Red / .Green on <html>.
   4. Keep every --x-rgb companion in sync with its --x value.
   ========================================================================== */

:root {
	/* ---------- Typography ---------- */
	--font-display: "Trebuchet MS", "Segoe UI", sans-serif;
	--font-family-api: "SF Mono", "Fira Code", "Consolas", monospace;
	--font-family-ui: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial,
		sans-serif;

	/* ---------- Corner radii ---------- */
	--radius-lg: 22px;
	--radius-md: 14px;

	/* ---------- Grayscale ramp (contrast ratios noted for AA checks) ---------- */
	--gray-0: #FFFFFF;   /* pure white */
	--gray-1: #F5F5F5;   /* page background tint */
	--gray-2: #E5E5E5;   /* border / divider */
	--gray-3: #D4D4D4;   /* weak border */
	--gray-4: #A3A3A3;   /* placeholder / disabled text (2.8:1) */
	--gray-5: #737373;   /* tertiary text (4.6:1) */
	--gray-6: #525252;   /* secondary text (7.0:1) */
	--gray-7: #404040;   /* primary text (9.5:1) */
	--gray-8: #262626;   /* heading text (14:1) */
	--gray-9: #171717;   /* dark base */
	--gray-A: #000000;   /* pure black */

	/* RGB companions - used to compose translucent colors without hardcoding */
	--gray-0-rgb: 255, 255, 255;
	--gray-1-rgb: 245, 245, 245;
	--gray-2-rgb: 229, 229, 229;
	--gray-3-rgb: 212, 212, 212;
	--gray-4-rgb: 163, 163, 163;
	--gray-5-rgb: 115, 115, 115;
	--gray-6-rgb: 82, 82, 82;
	--gray-7-rgb: 64, 64, 64;
	--gray-8-rgb: 38, 38, 38;
	--gray-9-rgb: 23, 23, 23;
	--gray-A-rgb: 0, 0, 0;

	/* ---------- Semantic: text ---------- */
	--text-primary: var(--gray-8);      /* headings / body core */
	--text-secondary: var(--gray-6);    /* supporting copy */
	--text-tertiary: var(--gray-5);     /* auxiliary / placeholder */
	--text-disabled: var(--gray-4);     /* disabled state */
	--text-inverse: var(--gray-0);      /* text on dark surfaces */

	/* ---------- Semantic: background ---------- */
	--bg-base: var(--gray-0);           /* page background */
	--bg-elevated: var(--gray-1);       /* cards / menus / dialogs */
	--bg-inset: var(--gray-2);          /* inputs / tables / sunken areas */
	--bg-overlay: rgba(var(--gray-A-rgb), 0.8); /* modal scrim */

	--bg-trans-subtle: rgba(var(--gray-2-rgb), 0.8);
	--bg-trans-hover: rgba(var(--gray-4-rgb), 0.2);

	/* ---------- Semantic: border ---------- */
	--border-subtle: var(--gray-2);     /* faintest divider */
	--border-default: var(--gray-3);    /* regular border (inputs, tables) */
	--border-strong: var(--gray-4);     /* emphasized border (active, focus) */

	/* ---------- Semantic: shadow ---------- */
	--shadow-card: 0 5px 10px rgba(var(--gray-9-rgb), 0.08),
		0 1px 2px rgba(var(--gray-9-rgb), 0.05);
	--shadow-drop: 0 8px 24px rgba(var(--gray-9-rgb), 0.12);
	--shadow-inset: inset 5px 5px 5px 2px rgba(var(--gray-2-rgb), 0.5);

	/* ---------- Brand ---------- */
	--primary-rgb: 29, 78, 216;
	--color-primary: #1D4ED8;           /* brand blue (contrast 6.9:1 on white) */
	--color-primary-hover: #2563EB;     /* hover / active state */
	--color-primary-light: #DBEAFE;     /* light surface for badges / tags */
	--color-primary-contrast: #FFFFFF;  /* text / icon placed on primary surfaces */

	/* ---------- Functional ---------- */
	--success-rgb: 22, 163, 74;
	--color-success: #16A34A;
	--color-success-bg: #DCFCE7;

	--warning-rgb: 245, 158, 11;
	--color-warning: #F59E0B;
	--color-warning-bg: #FEF3C7;

	--danger-rgb: 220, 38, 38;
	--color-danger: #DC2626;
	--color-danger-bg: #FEE2E2;

	--color-info: #6B7280;
	--color-info-bg: #F3F4F6;

	/* ---------- Spacing ---------- */
	--space-s: 5px;
	--space-m: 10px;
	--space-l: 20px;
	--space-x: 30px;

	/* ---------- Radius scale ---------- */
	--radius-s: 5px;
	--radius-m: 10px;
	--radius-l: 15px;
	--radius-x: 20px;
	--radius-full: 9999px;

	/* ---------- Font sizes ---------- */
	--font-size-t: 12px;   /* tiny labels (auxiliary only) */
	--font-size-s: 14px;   /* small */
	--font-size-m: 16px;   /* medium - site default */
	--font-size-b: 18px;   /* big - body / mobile headings */
	--font-size-l: 20px;   /* large - subheading */
	--font-size-h: 24px;   /* huge - subheading */
	--font-size-e: 28px;   /* enormous - hero heading */

	/* ---------- Layout ---------- */
	--container-w: 1180px;
	--header-h: 64px;

	/* ---------- Motion ---------- */
	--transition-fast: 0.15s ease;
	--transition-base: 0.22s ease;

	/* ---------- Minesweeper board ---------- */
	--board-bg: var(--gray-3);     /* deeper than the tiles so they read as raised */
	--board-gap: 2px;
	--board-pad: 12px;

	--cell-face: #EDEDED;          /* covered tile */
	--cell-face-hover: #F7F7F7;    /* covered tile, pointer over it */
	--cell-face-active: #DCDCDC;   /* covered tile while pressed */
	--cell-open: var(--gray-0);    /* revealed tile */
	--cell-face-top: rgba(255, 255, 255, 0.95); /* bevel highlight */
	--cell-face-bottom: rgba(0, 0, 0, 0.14);    /* bevel shade */
	--cell-radius: 3px;
	--cell-text-shadow: none;

	--flag-color: #E11D48;
	--mine-color: #262626;
	--mine-hit-bg: #FCA5A5;        /* the tile that ended the game */
	--mine-wrong-bg: #FDE2E2;      /* flag placed on an empty tile */

	/* Numbers follow the classic Minesweeper color coding */
	--num-1: #1976D2;
	--num-2: #2E7D32;
	--num-3: #D32F2F;
	--num-4: #512DA8;
	--num-5: #9A3412;
	--num-6: #0E7490;
	--num-7: #374151;
	--num-8: #6B7280;

	/* ---------- Mobile tap highlight (replaces the default blue-gray) ---------- */
	--tap-highlight-color: rgba(var(--gray-4-rgb), 0.3);
}

/* ==========================================================================
   Dark theme override
   ========================================================================== */
[data-theme="dark"] {
	/* ---------- Inverted grayscale base (keeps AA contrast on dark) ---------- */
	--gray-0: #1A1A1A;   /* main background */
	--gray-1: #262626;   /* cards / elevated surfaces */
	--gray-2: #333333;   /* inputs / sunken areas */
	--gray-3: #4A4A4A;   /* faint divider */
	--gray-4: #6B6B6B;   /* strong border */
	--gray-5: #8C8C8C;   /* disabled text (3.2:1, disabled state only) */
	--gray-6: #A8A8A8;   /* tertiary text (4.8:1 - passes) */
	--gray-7: #C4C4C4;   /* secondary text (7.4:1) */
	--gray-8: #E0E0E0;   /* primary text (11.5:1) */
	--gray-9: #F5F5F5;   /* headings / inverse text */
	--gray-A: #FFFFFF;   /* pure white */

	--gray-0-rgb: 26, 26, 26;
	--gray-1-rgb: 38, 38, 38;
	--gray-2-rgb: 51, 51, 51;
	--gray-3-rgb: 74, 74, 74;
	--gray-4-rgb: 107, 107, 107;
	--gray-5-rgb: 140, 140, 140;
	--gray-6-rgb: 168, 168, 168;
	--gray-7-rgb: 196, 196, 196;
	--gray-8-rgb: 224, 224, 224;
	--gray-9-rgb: 245, 245, 245;
	--gray-A-rgb: 255, 255, 255;

	--text-inverse: var(--gray-A);

	/* ---------- Semantic tokens inherit the new ramp (overlay excepted) ---------- */
	--bg-overlay: rgba(var(--gray-0-rgb), 0.82);
	--bg-trans-subtle: rgba(var(--gray-2-rgb), 0.8);
	--bg-trans-hover: rgba(var(--gray-4-rgb), 0.3);

	/* ---------- Dark-mode shadows (stop black shadows from vanishing) ---------- */
	--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-drop: 0 8px 24px rgba(0, 0, 0, 0.7);

	/* ---------- Brand on dark: lifted blue keeps 7:1 against #1A1A1A ---------- */
	--primary-rgb: 96, 165, 250;
	--color-primary: #60A5FA;
	--color-primary-hover: #93C5FD;
	--color-primary-light: #1E3A8A;
	--color-primary-contrast: #0B1220;

	--color-success: #4ADE80;
	--color-success-bg: #1A3A2A;

	--color-warning: #FBBF24;
	--color-warning-bg: #3D2E1A;

	--color-danger: #F87171;
	--color-danger-bg: #3D1A1A;

	--color-info: #9CA3AF;
	--color-info-bg: #2A2A2A;

	/* ---------- Board on dark ---------- */
	--board-bg: #202020;

	--cell-face: #3A3A3A;
	--cell-face-hover: #454545;
	--cell-face-active: #2E2E2E;
	--cell-open: #1F1F1F;
	--cell-face-top: rgba(255, 255, 255, 0.10);
	--cell-face-bottom: rgba(0, 0, 0, 0.45);

	--flag-color: #FB7185;
	--mine-color: #E5E5E5;
	--mine-hit-bg: #7F1D1D;
	--mine-wrong-bg: #4C1D24;

	--num-1: #64B5F6;
	--num-2: #81C784;
	--num-3: #E57373;
	--num-4: #B39DDB;
	--num-5: #FFAB91;
	--num-6: #4DD0E1;
	--num-7: #D4D4D4;
	--num-8: #A3A3A3;

	--tap-highlight-color: rgba(var(--gray-4-rgb), 0.5);
}

/* ==========================================================================
   Optional brand skins - add class="Red" or class="Green" to <html>.
   The default blue skin needs no class.
   ========================================================================== */
.Red {
	--primary-rgb: 174, 15, 55;
	--color-primary: #AE0F37;
	--color-primary-hover: #D81344;
	--color-primary-light: #FBD5DE;
	--color-primary-contrast: #FFFFFF;
}

.Red[data-theme="dark"] {
	--primary-rgb: 235, 20, 74;
	--color-primary: #EB144A;
	--color-primary-hover: #F2698B;
	--color-primary-light: #960D2F;
	--color-primary-contrast: #FFFFFF;
}

.Green {
	--primary-rgb: 45, 143, 63;
	--color-primary: #2D8F3F;
	--color-primary-hover: #38B24F;
	--color-primary-light: #D8F3DD;
	--color-primary-contrast: #FFFFFF;
}

.Green[data-theme="dark"] {
	--primary-rgb: 50, 159, 70;
	--color-primary: #329F46;
	--color-primary-hover: #60CD74;
	--color-primary-light: #1C5927;
	--color-primary-contrast: #FFFFFF;
}