/*
  Global UI tokens and responsive base for a cleaner, modern look
  - Color system
  - Typography scale (fluid)
  - Spacing scale
  - Container and grid utilities
  - Component primitives (buttons, cards)
*/

:root {
	/* colors */
	--color-bg: #ffffff;
	--color-surface: #f8fafc;
	--color-primary: #0f62fe; /* IBM blue */
	--color-primary-600: #1f57ff;
	--color-secondary: #6936f5;
	--color-text: #0f172a;
	--color-text-muted: #475569;
	--color-border: #e2e8f0;
	--color-success: #16a34a;
	--color-danger: #ef4444;
	--color-warning: #f59e0b;

	/* radius */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;

	/* spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* fluid type scale */
	--font-size-sm: clamp(12px, 0.9vw, 14px);
	--font-size-base: clamp(14px, 1.1vw, 16px);
	--font-size-lg: clamp(16px, 1.4vw, 18px);
	--font-size-xl: clamp(18px, 1.8vw, 22px);
	--font-size-2xl: clamp(22px, 2.2vw, 26px);
	--font-size-3xl: clamp(26px, 3vw, 34px);
}

html { scroll-behavior: smooth; }
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-size: var(--font-size-base);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Base link and headings */
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-600); text-decoration: underline; }
h1 { font-size: var(--font-size-3xl); margin: 0 0 var(--space-4); }
h2 { font-size: var(--font-size-2xl); margin: 0 0 var(--space-3); }
h3 { font-size: var(--font-size-xl); margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-3); color: var(--color-text); }

/* Container & grid */
.container,
.auto-container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

.grid {
	display: grid;
	gap: var(--space-5);
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 991px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Card */
.card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	padding: var(--space-5);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--radius-sm);
	padding: 10px 16px;
	font-weight: 600;
	border: 1px solid transparent;
	transition: all .2s ease;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-600); transform: translateY(-1px); }
.btn-outline { background: #fff; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Header polish */
.main-header .logo h6 { margin-left: 8px; font-size: var(--font-size-lg); }
.main-header .navigation > li > a { color: #e2e8f0; padding: 12px 16px; border-radius: 8px; }
.main-header .navigation > li > a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sticky-header { box-shadow: 0 2px 10px rgba(2,6,23,.08); }

/* Footer polish */
.footer-part { background: #0b1220; color: #cbd5e1; padding: 20px;}
.footer-part .head-three { color: #fff; margin-bottom: var(--space-3); }
.footer-part .footer-menu a { color: #cbd5e1; }
.footer-part .footer-menu a:hover { color: #fff; }
.bottom-footer { border-top: 1px solid rgba(226,232,240,.1); padding: 16px 0; text-align: center; }

/* Utilities */
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.shadow-md { box-shadow: 0 6px 24px rgba(2,6,23,.08); }
.text-muted { color: var(--color-text-muted); }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

/* Responsive header controls */
@media (max-width: 1199px) {
	.grIcon { display: none !important; }
}