/* =============================================================
   TopTier — Base / Design Tokens
   Premium enterprise design system. Keep all global vars here.
   ============================================================= */

/* -------- Reset (lean, modern) -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; max-width: 100vw; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* -------- Tokens -------- */
:root {
	/* Brand palette — Scodero Swiss Enterprise
	   Muted deep blue primary, ink-black surfaces, clean whites.
	   Sophisticated & trustworthy, not flashy. */
	--tt-blue-50:  #F0F4F9;
	--tt-blue-100: #DCE4EF;
	--tt-blue-300: #6B8CBF;
	--tt-blue-500: #204ECF;   /* primary accent — deep confident blue */
	--tt-blue-600: #1A3FA6;
	--tt-blue-700: #132F7D;

	--tt-ink-900: #0D0F13;    /* near-black — matches Scodero logo */
	--tt-ink-800: #161A21;
	--tt-ink-700: #23282F;
	--tt-ink-500: #4A5060;
	--tt-ink-400: #6E7585;
	--tt-ink-300: #9BA1AE;
	--tt-ink-200: #D0D4DC;
	--tt-ink-100: #E8EAEF;
	--tt-ink-50:  #F5F6F8;

	--tt-paper:   #FFFFFF;
	--tt-canvas:  #FAFBFC;

	--tt-success: #1A9E5C;
	--tt-warning: #D4880A;
	--tt-danger:  #CC3333;

	/* Typography */
	--tt-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--tt-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

	/* Modular type scale (1.200 minor third -> 1.250 at larger sizes) */
	--tt-fs-xs:   0.75rem;    /* 12 */
	--tt-fs-sm:   0.875rem;   /* 14 */
	--tt-fs-base: 1rem;       /* 16 */
	--tt-fs-md:   1.125rem;   /* 18 */
	--tt-fs-lg:   1.375rem;   /* 22 */
	--tt-fs-xl:   1.75rem;    /* 28 */
	--tt-fs-2xl:  2.25rem;    /* 36 */
	--tt-fs-3xl:  3rem;       /* 48 */
	--tt-fs-4xl:  3.75rem;    /* 60 */
	--tt-fs-5xl:  4.5rem;     /* 72 */

	/* Spacing scale */
	--tt-space-1:  4px;
	--tt-space-2:  8px;
	--tt-space-3:  12px;
	--tt-space-4:  16px;
	--tt-space-5:  24px;
	--tt-space-6:  32px;
	--tt-space-7:  48px;
	--tt-space-8:  64px;
	--tt-space-9:  96px;
	--tt-space-10: 128px;

	/* Radii */
	--tt-r-sm: 6px;
	--tt-r-md: 10px;
	--tt-r-lg: 16px;
	--tt-r-xl: 24px;
	--tt-r-pill: 999px;

	/* Shadows — soft + layered */
	--tt-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04), 0 1px 1px rgba(10, 22, 40, 0.06);
	--tt-shadow-md: 0 4px 12px rgba(10, 22, 40, 0.06), 0 2px 4px rgba(10, 22, 40, 0.04);
	--tt-shadow-lg: 0 16px 40px rgba(10, 22, 40, 0.08), 0 4px 12px rgba(10, 22, 40, 0.05);
	--tt-shadow-xl: 0 32px 64px rgba(10, 22, 40, 0.12), 0 8px 24px rgba(10, 22, 40, 0.06);
	--tt-shadow-focus: 0 0 0 3px rgba(30, 94, 255, 0.25);

	/* Containers */
	--tt-container: 1200px;
	--tt-container-wide: 1360px;
	--tt-container-narrow: 860px;

	/* Motion */
	--tt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--tt-t-fast: 160ms;
	--tt-t-med:  240ms;
	--tt-t-slow: 420ms;

	/* Borders */
	--tt-border: 1px solid var(--tt-ink-100);
	--tt-border-strong: 1px solid var(--tt-ink-200);
}

/* -------- Base document -------- */
html {
	font-size: 16px;
	scroll-behavior: smooth;
}
body {
	font-family: var(--tt-font-body);
	font-size: var(--tt-fs-base);
	line-height: 1.6;
	color: var(--tt-ink-900);
	background: var(--tt-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* -------- Type -------- */
.tt-display,
h1.tt-display,
h2.tt-display {
	font-family: var(--tt-font-display);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-optical-sizing: auto;
	font-variation-settings: 'opsz' 100;
}
h1 { font-family: var(--tt-font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; font-size: clamp(2rem, 4.5vw + 0.5rem, 4.5rem); word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
h2 { font-family: var(--tt-font-display); font-weight: 500; line-height: 1.1;  letter-spacing: -0.015em; font-size: clamp(1.625rem, 2.5vw + 0.75rem, 3rem); word-wrap: break-word; overflow-wrap: break-word; }
h3 { font-family: var(--tt-font-display); font-weight: 500; line-height: 1.2;  letter-spacing: -0.01em;  font-size: clamp(1.25rem, 1vw + 0.875rem, 1.75rem); }
h4 { font-weight: 600; font-size: var(--tt-fs-lg); line-height: 1.3; }
h5 { font-weight: 600; font-size: var(--tt-fs-md); line-height: 1.4; }
h6 { font-weight: 600; font-size: var(--tt-fs-base); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.06em; }

p { color: var(--tt-ink-700); }
.tt-lede { font-size: var(--tt-fs-md); color: var(--tt-ink-500); max-width: 60ch; }

.tt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tt-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tt-blue-600);
}
.tt-eyebrow::before {
	content: '';
	width: 24px; height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* -------- Links -------- */
a {
	color: var(--tt-blue-600);
	transition: color var(--tt-t-fast) var(--tt-ease);
}
a:hover { color: var(--tt-blue-700); }
a:focus-visible {
	outline: none;
	box-shadow: var(--tt-shadow-focus);
	border-radius: 4px;
}

/* -------- Utility layout -------- */
.tt-container {
	width: 100%;
	max-width: var(--tt-container);
	margin: 0 auto;
	padding: 0 var(--tt-space-5);
}
.tt-container--wide   { max-width: var(--tt-container-wide); }
.tt-container--narrow { max-width: var(--tt-container-narrow); }

.tt-section {
	padding: var(--tt-space-9) 0;
}
.tt-section--sm { padding: var(--tt-space-7) 0; }
.tt-section--lg { padding: var(--tt-space-10) 0; }

.tt-section--dark {
	background: var(--tt-ink-900);
	color: var(--tt-ink-100);
}
.tt-section--dark h1,
.tt-section--dark h2,
.tt-section--dark h3,
.tt-section--dark h4 { color: #fff; }
.tt-section--dark p { color: var(--tt-ink-200); }
.tt-section--dark .tt-eyebrow { color: var(--tt-blue-300); }

.tt-section--canvas { background: var(--tt-canvas); }
.tt-section--ink    { background: var(--tt-ink-50); }

/* Grids */
.tt-grid { display: grid; gap: var(--tt-space-5); }
.tt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tt-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Stacks */
.tt-stack { display: flex; flex-direction: column; gap: var(--tt-space-4); }
.tt-stack--lg { gap: var(--tt-space-6); }
.tt-row { display: flex; align-items: center; gap: var(--tt-space-4); flex-wrap: wrap; }

/* Visibility helpers */
.tt-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Focus */
:focus-visible { outline: none; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	box-shadow: var(--tt-shadow-focus);
	border-color: var(--tt-blue-500);
}

/* Selection */
::selection { background: var(--tt-blue-500); color: #fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* -------- Responsive grid fallback -------- */
@media (max-width: 1024px) {
	.tt-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.tt-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.tt-section    { padding: var(--tt-space-7) 0; }
	.tt-section--lg { padding: var(--tt-space-8) 0; }
	.tt-grid--4, .tt-grid--3, .tt-grid--2 { grid-template-columns: 1fr; }
}