/* ==============================================
   TYPOGRAPHY - Base Text Styles & Font Imports
   File: layout/css/base/typography.css

   Extracted from layout/style.css and
   layout/overall/header.php during CSS refactor.
   ============================================== */

/* -----------------------------------------
   1. Font Imports (Google Fonts)
   ----------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Patua+One');
@import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap');

/* -----------------------------------------
   2. Global / Universal Font Settings
   Selectors: *, body
   Source: style.css lines 834-837, 929-935
   ----------------------------------------- */
* {
	font-family: Verdana, Arial, Times New Roman, sans-serif;
	color: #fff;
}

body {
	font-family: Arial, sans-serif;
	color: #fff;
	background-color: #000;
	margin: 0;
	padding: 0;
}

/* -----------------------------------------
   3. Form Element Base Styles
   Source: style.css lines 839-857
   ----------------------------------------- */

select {
	color: var(--color-text-primary, #fff);
	background: var(--input-bg, rgba(0, 0, 0, 0.6));
	border: 1px solid var(--input-border, #5a4a3a);
	border-radius: var(--radius-base, 6px);
	padding: 8px 12px;
	font-size: var(--font-size-base, 14px);
	cursor: pointer;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a55c' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 30px;
}

select:hover {
	border-color: var(--input-border-hover, rgba(139, 69, 19, 0.6));
}

select:focus {
	outline: none;
	border-color: var(--input-border-focus, #DAA520);
	box-shadow: var(--shadow-focus, 0 0 0 3px rgba(218, 165, 32, 0.15));
}

option {
	color: var(--color-text-primary, #fff);
	background: var(--color-bg-option, #1a1210);
	padding: 8px;
}

input {
	color: #000;
}

button {
	color: #000;
}

/* -----------------------------------------
   4. Link Styles
   Source: style.css lines 42-53
   ----------------------------------------- */
a {
	font-family: 'Copperplate', sans-serif;
	text-decoration: none;
	color: #b33b29;
	transition: color 0.1s linear;
}

a:hover {
	color: #f2f2f2;
}

/* -----------------------------------------
   5. Custom Scrollbar Styles
   Source: style.css lines 160-172
   ----------------------------------------- */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #aaa;
}