/* TrueCoders design-system tokens.
   Ported verbatim from the design project's _ds/tokens/*.css. Values that the
   Design tab can change are re-declared at runtime by tc_dynamic_css(). */

:root {
	/* Brand (sampled from the logo) */
	--tc-pink: #E85088;
	--tc-pink-deep: #D04078;
	--tc-pink-soft: rgba(232, 80, 136, .16);
	--tc-pink-line: rgba(232, 80, 136, .4);
	--tc-pink-glow: rgba(232, 80, 136, .35);

	/* Action blue */
	--tc-blue: #3A6DF0;
	--tc-blue-hover: #1E59F1;

	/* Semantic */
	--tc-green: #3BF083;
	--tc-green-dot: #5FCF65;
	--tc-red: #F96057;
	--tc-yellow: #F8CE52;

	/* Banner gradient */
	--tc-grad-1: #CF4AF3;
	--tc-grad-2: #E73BD7;
	--tc-grad-3: #F631BC;
	--tc-grad-4: #FD31A2;
	--tc-grad-5: #FF3A8B;
	--tc-grad-6: #FF4B78;
	--tc-grad-7: #FF5E68;
	--tc-grad-8: #FF705C;
	--tc-grad-9: #FF8C51;
	--tc-grad-10: #FFAA49;
	--tc-grad-11: #FFC848;
	--tc-grad-12: #FFE652;
	--tc-gradient-banner: linear-gradient(to right top, var(--tc-grad-1), var(--tc-grad-2), var(--tc-grad-3), var(--tc-grad-4), var(--tc-grad-5), var(--tc-grad-6), var(--tc-grad-7), var(--tc-grad-8), var(--tc-grad-9), var(--tc-grad-10), var(--tc-grad-11), var(--tc-grad-12));
	--tc-gradient-brand: linear-gradient(135deg, var(--tc-pink) 0%, var(--tc-pink-deep) 100%);

	/* Neutral ink & solids */
	--tc-white: #F9FAFB;
	--tc-ink-3: #999BA5;
	--tc-navy-950: #0F111B;
	--tc-navy-900: #14162B;
	--tc-navy-850: #161925;
	--tc-navy-800: #21242D;
	--tc-navy-700: #2A2E3C;

	/* Glass surfaces */
	--theme-bg-color: rgba(16, 18, 27, .40);
	--border-color: rgba(113, 119, 144, .25);
	--theme-color: var(--tc-white);
	--inactive-color: rgba(176, 181, 201, .92);
	--hover-menu-bg: rgba(12, 15, 25, .30);
	--content-title-color: var(--tc-ink-3);
	--content-bg: rgba(146, 151, 179, .13);
	--button-inactive: rgba(249, 250, 251, .8);
	--button-outline-border: rgba(249, 250, 251, .22);
	--dropdown-bg: var(--tc-navy-800);
	--search-bg: var(--tc-navy-900);
	--scrollbar-bg: rgba(1, 2, 3, .40);

	/* Semantic aliases */
	--text-primary: var(--theme-color);
	--text-secondary: var(--inactive-color);
	--text-muted: var(--content-title-color);
	--text-on-brand: #fff;
	--action-primary: var(--tc-pink);
	--action-primary-hover: var(--tc-pink-deep);
	--action-secondary: var(--tc-blue);
	--action-secondary-hover: var(--tc-blue-hover);
	--status-ok: var(--tc-green);
	--status-update: var(--tc-blue);
	--status-error: var(--tc-red);
	--status-warn: var(--tc-yellow);

	/* Typography */
	--body-font: "Poppins", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--leading-tight: 1.15;
	--leading-relaxed: 1.6em;
	--leading-loose: 1.7em;

	/* Spacing & measures */
	--header-height: 58px;
	--tc-maxw: 1180px;
	--tc-gutter: clamp(20px, 4vw, 40px);
	--pad-card: 20px;

	/* Effects */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-lg: 14px;
	--radius-pill: 20px;
	--blur-glass: blur(20px);
	--shadow-float: -1px 3px 8px -1px rgba(0, 0, 0, .2);
	--shadow-input: 0 0 0 2px rgba(134, 140, 160, .02);
	--shadow-focus: 0 0 0 1px var(--border-color);
	--duration-fast: .3s;
	--hover-scale: 1.02;
	--bg-scene:
		radial-gradient(ellipse at 20% 10%, rgba(232, 80, 136, .45), transparent 55%),
		radial-gradient(ellipse at 85% 25%, rgba(58, 109, 240, .45), transparent 50%),
		radial-gradient(ellipse at 60% 90%, rgba(207, 74, 243, .35), transparent 55%),
		#0F111B;
	--texture-cubes: url("../img/cubes.png"); /* local copy — no third-party request */
}

/* Base (tokens/base.css) */
.tc *,
.tc *::before,
.tc *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body.tc {
	margin: 0;
	font-family: var(--body-font);
	color: var(--text-primary);
	background: var(--bg-scene);
	background-attachment: fixed;
}

/* Deliberately low specificity (a type selector) so component classes such as
   .tc-nav__link or .tc-booking set their own colour without needing !important. */
a { color: var(--text-primary); text-decoration: none; transition: var(--duration-fast); }
a:hover { color: var(--tc-pink); }
img { max-width: 100%; }

.tc ::-webkit-scrollbar { width: 6px; height: 6px; border-radius: 10px; }
.tc ::-webkit-scrollbar-thumb { background: var(--scrollbar-bg); border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tc-header { transition: none; }
}