/* ============================================================
   Web Minesweeper - Design Token System (Heritage v2)
   Visual language: refined Windows 95 heritage.
   All semantic colors MUST be consumed from this file, never
   hardcode raw values in other stylesheets.
   Primary color: Indigo #4F46E5 (used for title bars, menu
   highlights, links, and primary buttons - a modern accent
   fused with the classic navy title-bar tradition).
   ============================================================ */

:root {
	/* Grayscale ladder (warm silver / graphite base) */
	--gray-0: #FFFFFF;   /* Pure white */
	--gray-1: #F2F1EC;   /* Light paper / hover surface */
	--gray-2: #DCDBD3;   /* Sunken cell / inset background */
	--gray-3: #C9C8C0;   /* Weak border */
	--gray-4: #A8A79F;   /* Placeholder / disabled text */
	--gray-5: #7B7A72;   /* Tertiary text */
	--gray-6: #55544E;   /* Secondary text */
	--gray-7: #3D3C37;   /* Strong text */
	--gray-8: #26251F;   /* Primary text on silver */
	--gray-9: #151410;   /* Deep base */
	--gray-A: #000000;   /* Pure black (window outlines) */
	/* Grayscale RGB triplets (for transparent derivatives) */
	--gray-0-rgb: 255, 255, 255;
	--gray-1-rgb: 242, 241, 236;
	--gray-2-rgb: 220, 219, 211;
	--gray-3-rgb: 201, 200, 192;
	--gray-4-rgb: 168, 167, 159;
	--gray-5-rgb: 123, 122, 114;
	--gray-6-rgb: 85, 84, 78;
	--gray-7-rgb: 61, 60, 55;
	--gray-8-rgb: 38, 37, 31;
	--gray-9-rgb: 21, 20, 16;
	--gray-A-rgb: 0, 0, 0;
    /* Do not use the raw definitions above directly in CSS */

	/* Heritage surfaces */
	--desk: #0F766E;            /* The classic "desktop" teal canvas */
	--desk-deep: #0B5D57;       /* Darker edge of the desktop */
	--silver-hi: #FFFFFF;       /* Bevel highlight */
	--silver: #D6D5CE;          /* Panel silver */
	--silver-lo: #B9B8B0;       /* Bevel mid shade */
	--silver-shadow: #83827A;   /* Bevel shadow */
	--paper: #FDFCF6;           /* Document window paper */
	--well: #131311;            /* LED counter well */

	/* Signature bevels (the core heritage motif) */
	--bevel-out: inset -1px -1px 0 0 var(--silver-shadow),
		inset 1px 1px 0 0 var(--silver-hi),
		inset -2px -2px 0 0 var(--silver-lo),
		inset 2px 2px 0 0 #EFEEE8;
	--bevel-in: inset 2px 2px 0 0 var(--silver-shadow),
		inset -2px -2px 0 0 var(--silver-hi),
		inset 1px 1px 0 0 rgba(0, 0, 0, 0.28),
		inset -1px -1px 0 0 #EFEEE8;
	--bevel-press: inset 2px 2px 0 0 var(--silver-shadow),
		inset -2px -2px 0 0 #EFEEE8;

	/* Font stacks */
	--font-display: "Pixelify Sans", "Tahoma", "PingFang SC", "Microsoft YaHei", sans-serif;
	--font-mono: "VT323", "Consolas", "SF Mono", monospace;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Roboto,"Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
	--font-family-api: var(--font-mono); /* Legacy alias kept for compatibility */

	/* Skin presets (kept for the shared token system) */
    --skin-default: #4F46E5;
    --skin-red:     #AE0F37;
	--skin-blue:    #050F94;

	/* Semantic tokens */
	/* --- Text colors --- */
	--text-primary:   var(--gray-8);
	--text-secondary: var(--gray-6);
	--text-tertiary:  var(--gray-5);
	--text-disabled:  var(--gray-4);
	--text-inverse:   var(--gray-0);
	/* Text on the teal desktop canvas */
	--text-on-desk:   #FFFFFF;
	--text-on-desk-2: #D3EFEB;

	/* --- Background colors --- */
	--bg-page:     var(--desk);        /* Page canvas (the desktop) */
	--bg-base:     var(--silver);      /* Panel base (windows) */
	--bg-elevated: var(--silver);      /* Menus / popups */
	--bg-inset:    var(--gray-2);      /* Inputs / sunken areas */
	--bg-overlay:  rgba(var(--gray-A-rgb), 0.8);
	--bg-trans-subtle: rgba(var(--gray-2-rgb), 0.8);
	--bg-trans-hover:  rgba(var(--gray-4-rgb), 0.25);

	/* --- Border colors --- */
	--border-subtle:  var(--gray-2);
	--border-default: var(--gray-3);
	--border-strong:  var(--gray-4);

	/* Functional colors */
    --primary-rgb:         79, 70, 229;
	--color-primary:       #4F46E5;
	--color-primary-hover: #4338CA;
	--color-primary-light: #E0E7FF;
	--titlebar-hi:         #6D66F0;   /* Title bar gradient top */
	--led:                 #FF4B3E;   /* LED counter red */

	--success-rgb:         17, 126, 57;
	--color-success:       #16A34A;
	--color-success-bg:    #DCFCE7;

	--warning-rgb:         181, 117, 8;
	--color-warning:       #F59E0B;
	--color-warning-bg:    #FEF3C7;

    --danger-rgb:          202, 33, 33;
	--color-danger:        #DC2626;
	--color-danger-bg:     #FEE2E2;

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

	/* --- Shadows (hard, pixel-era; no soft blur) --- */
	--shadow-card:  3px 3px 0 rgba(0, 0, 0, 0.22);
	--shadow-drop:  5px 5px 0 rgba(0, 0, 0, 0.28);
	--shadow-inset: var(--bevel-in);

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

	/* Border radius: heritage is sharp. Kept as tokens (all zero)
	   so the system stays swappable. */
	--radius-s: 0px;
	--radius-m: 0px;
	--radius-l: 0px;
    --radius-x: 0px;
	--radius-h: 0px;
	--radius-full: 9999px;

    /* Font sizes */
	--font-size-t: 12px;
    --font-size-s: 14px;
	--font-size-m: 16px;
	--font-size-b: 18px;
	--font-size-l: 20px;
    --font-size-h: 26px;
    --font-size-e: 40px;

	/* Motion */
	--t-fast: 90ms;
	--t-med: 150ms;

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

/* Dark mode override: the "midnight desktop" */
[data-theme="dark"] {
	--gray-0: #1B1B18;
	--gray-1: #232320;
	--gray-2: #2E2E2A;
	--gray-3: #3B3B36;
	--gray-4: #55544E;
	--gray-5: #8C8B83;
	--gray-6: #A9A89F;
	--gray-7: #C6C5BC;
	--gray-8: #E2E1D8;
	--gray-9: #F2F1EA;
	--gray-A: #FFFFFF;

	--gray-0-rgb: 27, 27, 24;
	--gray-1-rgb: 35, 35, 32;
	--gray-2-rgb: 46, 46, 42;
	--gray-3-rgb: 59, 59, 54;
	--gray-4-rgb: 85, 84, 78;
	--gray-5-rgb: 140, 139, 131;
	--gray-6-rgb: 169, 168, 159;
	--gray-7-rgb: 198, 197, 188;
	--gray-8-rgb: 226, 225, 216;
	--gray-9-rgb: 242, 241, 234;
	--gray-A-rgb: 255, 255, 255;

	--desk: #0A1F1C;
	--desk-deep: #071613;
	--silver-hi: #4A4B45;
	--silver: #2E2F2B;
	--silver-lo: #232420;
	--silver-shadow: #171814;
	--paper: #262722;
	--well: #0C0C0A;

	--bevel-out: inset -1px -1px 0 0 var(--silver-shadow),
		inset 1px 1px 0 0 var(--silver-hi),
		inset -2px -2px 0 0 var(--silver-lo),
		inset 2px 2px 0 0 #3D3E38;
	--bevel-in: inset 2px 2px 0 0 var(--silver-shadow),
		inset -2px -2px 0 0 var(--silver-hi),
		inset 1px 1px 0 0 rgba(0, 0, 0, 0.55),
		inset -1px -1px 0 0 #3D3E38;
	--bevel-press: inset 2px 2px 0 0 var(--silver-shadow),
		inset -2px -2px 0 0 #3D3E38;

	--text-on-desk:   #EAF6F4;
	--text-on-desk-2: #BFDCD7;

	--primary-rgb:         129, 140, 248;
	--color-primary:       #818CF8;
	--color-primary-hover: #A5B4FC;
	--color-primary-light: #312E81;
	--titlebar-hi:         #5B54D6;
	--led:                 #FF6B5E;

	--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;

	--shadow-card: 3px 3px 0 rgba(0, 0, 0, 0.5);
	--shadow-drop: 5px 5px 0 rgba(0, 0, 0, 0.6);

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

/* Light skin presets (reserved for the shared token system) */
.Red{
    --primary-rgb:         174, 15, 55;
    --color-primary:       #AE0F37;
	--color-primary-hover: #D81344;
	--color-primary-light: #F7A6BA;
	--titlebar-hi:         #CB1A4C;
}

.Blue{
    --primary-rgb:         5, 15, 148;
    --color-primary:       #050F94;
	--color-primary-hover: #0714CA;
	--color-primary-light: #8E95FB;
	--titlebar-hi:         #141CA8;
}

/* Dark variants of the skin presets */
.Red[data-theme="dark"] {
	--color-primary:       #EB144A;
	--color-primary-hover: #F2698B;
	--color-primary-light: #960D2F;
	--titlebar-hi:         #C4123D;
}

.Blue[data-theme="dark"]{
	--color-primary:       #3542F8;
	--color-primary-hover: #5A66FA;
	--color-primary-light: #040B71;
	--titlebar-hi:         #232CC4;
}