/* ==========================================================================
   Prince Creative — Concept A design tokens & utilities
   Dark is the brand default; [data-theme="light"] on <html> switches modes.
   Use the variables anywhere in Bricks: e.g. a color field set to var(--pc-text).
   ========================================================================== */

:root,
[data-theme="dark"] {
	--pc-accent: #C9A86A;          /* gold — fills, buttons, the frame-dot */
	--pc-accent-text: #C9A86A;     /* gold used as text / borders on the page background */
	--pc-on-accent: #0B0B0C;

	--pc-bg: #0B0B0C;
	--pc-surface: #141416;
	--pc-card: #18181B;
	--pc-line: #222226;
	--pc-line-2: #26262A;
	--pc-line-3: #2E2E33;
	--pc-text: #F2EFE8;
	--pc-text-2: #C9C5BC;
	--pc-text-3: #B7B3AA;
	--pc-muted: #8C8980;
	--pc-faint: #77746D;
	--pc-btn-border: #4A4A50;

	/* Inverted band (PRINCIPLES section): bone in dark mode */
	--pc-inv-bg: #F2EFE8;
	--pc-inv-text: #0B0B0C;
	--pc-inv-text-2: #2A2A2D;
	--pc-inv-text-3: #4A4843;
	--pc-inv-label: #6B5426;
	--pc-inv-btn-bg: #0B0B0C;
	--pc-inv-btn-text: #F2EFE8;
	--pc-inv-border: #0B0B0C;

	--pc-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--pc-container: 1280px;
	--pc-gutter: clamp(20px, 5vw, 64px);
	--pc-section-y: clamp(64px, 9vw, 112px);

	color-scheme: dark;
}

[data-theme="light"] {
	--pc-accent-text: #7A5E26;
	--pc-bg: #F7F5F0;
	--pc-surface: #EDEAE3;
	--pc-card: #E6E2D9;
	--pc-line: #DAD6CD;
	--pc-line-2: #D2CEC4;
	--pc-line-3: #C2BDB1;
	--pc-text: #0B0B0C;
	--pc-text-2: #2E2D2A;
	--pc-text-3: #45433E;
	--pc-muted: #5E5B55;
	--pc-faint: #6B675F;
	--pc-btn-border: #8C8980;

	/* Inverted band flips to ink in light mode */
	--pc-inv-bg: #0B0B0C;
	--pc-inv-text: #F2EFE8;
	--pc-inv-text-2: #D8D4CB;
	--pc-inv-text-3: #B7B3AA;
	--pc-inv-label: #C9A86A;
	--pc-inv-btn-bg: #C9A86A;
	--pc-inv-btn-text: #0B0B0C;
	--pc-inv-border: #8C8980;

	color-scheme: light;
}

/* ---------- Base ---------- */
body {
	background: var(--pc-bg);
	color: var(--pc-text);
	font-family: var(--pc-font);
	font-size: 17px;
	line-height: 1.55;
	transition: background-color 0.3s ease, color 0.3s ease;
}
a { color: inherit; }
a:hover { opacity: 0.72; }
::selection { background: var(--pc-accent); color: var(--pc-on-accent); }

/* ---------- Layout ---------- */
.pc-container {
	width: 100%;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
	box-sizing: border-box;
}
.pc-section { padding-block: var(--pc-section-y); }
.pc-section--surface { background: var(--pc-surface); border-block: 1px solid var(--pc-line); }
.pc-section--inverse { background: var(--pc-inv-bg); color: var(--pc-inv-text); }
.pc-section--inverse .pc-eyebrow { color: var(--pc-inv-label); }
.pc-section--inverse .pc-text-2 { color: var(--pc-inv-text-2); }
.pc-section--inverse .pc-text-3 { color: var(--pc-inv-text-3); }
.pc-rule-top { border-top: 1px solid var(--pc-line); }
.pc-rule-bottom { border-bottom: 1px solid var(--pc-line); }

.pc-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--pc-line-2);
	border: 1px solid var(--pc-line-2);
}
.pc-grid-3 > * { background: var(--pc-bg); padding: 36px 32px 40px; }
.pc-grid-work {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 48px 28px;
}

/* ---------- Type ---------- */
.pc-display,
.pc-h1 {
	font-size: clamp(44px, 8vw, 116px);
	line-height: 0.92;
	font-weight: 800;
	font-stretch: 125%;
	letter-spacing: -0.015em;
	margin: 0;
}
.pc-h2 {
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1;
	font-weight: 800;
	font-stretch: 125%;
	margin: 0;
}
.pc-h3 {
	font-size: 26px;
	line-height: 1.1;
	font-weight: 700;
	font-stretch: 118%;
	margin: 0;
}
.pc-lead { font-size: 20px; color: var(--pc-text-2); max-width: 560px; }
.pc-text-2 { color: var(--pc-text-2); }
.pc-text-3 { color: var(--pc-text-3); }
.pc-muted { color: var(--pc-muted); }
.pc-mono { font-family: var(--pc-mono); }
.pc-eyebrow {
	font-family: var(--pc-mono);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-accent-text);
}
.pc-timecode {
	font-family: var(--pc-mono);
	font-size: 14px;
	color: var(--pc-muted);
	letter-spacing: 0.04em;
}

/* ---------- Buttons ---------- */
.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	background: var(--pc-accent);
	color: var(--pc-on-accent);
	font-weight: 700;
	font-stretch: 112%;
	text-decoration: none;
	border: 1px solid var(--pc-accent);
	cursor: pointer;
}
.pc-btn--outline {
	background: transparent;
	color: var(--pc-text);
	border-color: var(--pc-btn-border);
	font-weight: 600;
}
.pc-btn--nav {
	min-height: 44px;
	padding: 0 18px;
	background: transparent;
	color: var(--pc-accent-text);
	border-color: var(--pc-accent-text);
	font-family: var(--pc-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- Components ---------- */
.pc-nav-link {
	font-family: var(--pc-mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 0;
}
.pc-frame {
	position: relative;
	aspect-ratio: 2.39 / 1;
	background: var(--pc-surface);
	border: 1px solid var(--pc-line-2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pc-placeholder {
	aspect-ratio: 16 / 10;
	background: var(--pc-card);
	border: 1px solid var(--pc-line-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pc-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--pc-faint);
}
.pc-film-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	padding: 28px 0;
	border-top: 1px solid var(--pc-line-3);
	align-items: baseline;
}
.pc-film-row:last-child { border-bottom: 1px solid var(--pc-line-3); }
.pc-film-row > .pc-timecode { flex: 0 0 140px; }
.pc-film-row > h3 { flex: 1 1 280px; }
.pc-film-row > p { flex: 2 1 380px; color: var(--pc-text-3); margin: 0; }

.pc-input {
	min-height: 52px;
	padding: 0 16px;
	border: 1px solid var(--pc-inv-border);
	background: transparent;
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}
.pc-section--inverse .pc-btn { background: var(--pc-inv-btn-bg); color: var(--pc-inv-btn-text); border-color: var(--pc-inv-btn-bg); }

/* ---------- Logo element ---------- */
.pc-logo {
	--pc-logo-size: 34px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--pc-text);
}
.pc-logo svg { width: var(--pc-logo-size); height: var(--pc-logo-size); flex: none; }
.pc-logo .pc-logo__p { fill: currentColor; }
.pc-logo .pc-logo__dot { fill: var(--pc-accent); }
.pc-logo__word {
	font-size: 17px;
	font-weight: 800;
	font-stretch: 125%;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.pc-logo__word span { font-weight: 300; }

/* ---------- Theme toggle element ---------- */
.pc-theme-toggle {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--pc-line-3);
	background: transparent;
	color: var(--pc-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.pc-theme-toggle:hover { border-color: var(--pc-accent-text); }
.pc-theme-toggle:focus-visible { outline: 2px solid var(--pc-accent-text); outline-offset: 3px; }
.pc-theme-toggle svg { width: 20px; height: 20px; }
.pc-theme-toggle .pc-icon-moon { display: none; }
[data-theme="light"] .pc-theme-toggle .pc-icon-sun { display: none; }
[data-theme="light"] .pc-theme-toggle .pc-icon-moon { display: block; }

@media (prefers-reduced-motion: reduce) {
	body, .pc-theme-toggle { transition: none; }
}