@import '@w1c/fonts/geocities.css';
@import '../styles/tokens.css';

@layer w1c.theme {
	:root,
	[data-w1c-theme='geocities'] {
		--w1c-theme-name: 'Geocities';
		--w1c-font-heading: 'Comic Relief', 'Comic Neue', Comic Sans MS, cursive;
		--w1c-font-ui: 'Comic Neue', Comic Sans MS, cursive;
		--w1c-font-mono: 'Comic Neue', 'Courier New', monospace;
		--w1c-surface: #ffffcc;
		--w1c-surface-raised: #ffffff;
		--w1c-window-content-background: #ffffff;
		--w1c-control-background: #ffeb66;
		--w1c-control-text: #000000;
		--w1c-control-highlight: #ffffff;
		--w1c-control-shadow: #cc6600;
		--w1c-control-dark-shadow: #660066;
		--w1c-active-titlebar: #660099;
		--w1c-active-titlebar-text: #ffffff;
		--w1c-inactive-titlebar: #ff66cc;
		--w1c-inactive-titlebar-text: #000000;
		--w1c-focus-ring: #0000ee;
		--w1c-radius-1: 0;
		--w1c-radius-2: 0;
		--w1c-panel-frame: #ff66cc;
		--w1c-panel-background: #ffffff;
		--w1c-panel-text: #000000;
		--w1c-panel-border: 3px ridge #ff66cc;
		--w1c-panel-highlight: #ffff00;
		--w1c-panel-shadow: 5px 5px 0 #00ffff;
		--w1c-panel-chrome-background: repeating-linear-gradient(45deg, #ffff00 0 8px, #ff66cc 8px 16px);
		--w1c-panel-header-border: 3px groove #660066;
		--w1c-panel-header-font: 700 15px/1.1 var(--w1c-font-heading);
		--w1c-taskbar-background: repeating-linear-gradient(90deg, #660099 0 18px, #0000ee 18px 36px, #ff66cc 36px 54px);
		--w1c-taskbar-text: #ffffff;
		--w1c-taskbar-border-block-start: 3px outset #ffff00;
		--w1c-taskbar-border-block-end: 3px inset #660066;
		--w1c-taskbar-tray-border: 3px ridge #ffff00;
		--w1c-taskbar-button-background: #ffff00;
		--w1c-taskbar-button-active-background: #ff66cc;
		--w1c-taskbar-button-text: #000000;
		--w1c-menu-bar-background: #ffff00;
		--w1c-menu-bar-border-block-start: 3px outset #ffffff;
		--w1c-menu-bar-border-block-end: 3px inset #cc6600;
		--w1c-menu-background: #ffffcc;
		--w1c-menu-border: 3px ridge #660066;
		--w1c-menu-shadow: 5px 5px 0 #00ffff;
		--w1c-menu-item-active-background: #660099;
		--w1c-menu-item-active-text: #ffffff;
		--w1c-address-field-background: #ffffff;
		--w1c-address-field-border: 3px inset #cc6600;
		--w1c-address-field-highlight: #ffff00;
		--w1c-address-field-label-background: #ffff00;
		--w1c-tabs-gap: 3px;
		--w1c-tab-border: 3px outset #ff66cc;
		--w1c-tab-background: #ffff00;
		--w1c-tab-active-background: #ffffff;
		--w1c-tabs-panel-border: 3px ridge #ff66cc;
		--w1c-tabs-panel-background: #ffffff;
		--w1c-toast-background: #ffff00;
		--w1c-toast-border: 3px ridge #ff66cc;
		--w1c-toast-shadow: 5px 5px 0 #00ffff;
		--w1c-toast-info: #0000ee;
		--w1c-toast-warning: #cc6600;
		--w1c-toast-danger: #ff0000;
		--w1c-badge-background: linear-gradient(#ffffff 0 48%, #ffeb66 48% 100%);
		--w1c-badge-icon-background: #660099;
		--w1c-badge-icon-text: #ffffff;
		--w1c-badge-text: #000000;
		--w1c-badge-warning-background: repeating-linear-gradient(45deg, #ffff00 0 5px, #000000 5px 10px);
		--w1c-counter-background: #000000;
		--w1c-counter-text: #00ff66;
		--w1c-counter-label-text: #ffff00;
		--w1c-guestbook-border: 4px ridge #ff66cc;
		--w1c-guestbook-shadow: 5px 5px 0 #00ffff;
		--w1c-guestbook-header-background: repeating-linear-gradient(90deg, #ffff00 0 12px, #ff66cc 12px 24px);
		--w1c-webring-border: 3px double #0000ee;
		--w1c-webring-background: #ffffcc;
		--w1c-webring-title-text: #660099;
		--w1c-construction-stripes: repeating-linear-gradient(45deg, #ffff00 0 10px, #000000 10px 20px);
		--w1c-marquee-background: #000000;
		--w1c-marquee-text: #ffff00;
		--w1c-blink-text: #ff0000;
		--w1c-tiled-color: #000066;
		--w1c-tiled-image: radial-gradient(circle at 2px 2px, #ffffff 1px, transparent 1.5px);
		--w1c-link-cluster-border: 3px ridge #00ffff;
		--w1c-link-cluster-heading-background: #ff66cc;
		--w1c-last-updated-border: 2px dotted #ff66cc;
		--w1c-image-map-border: 4px ridge #ffff00;
		--w1c-image-map-hotspot-background: rgb(0 0 238 / 0.72);
	}
}