/* DetailDeco — design tokens, reset, layout primitives. */

@font-face{
	font-family:'Outfit';
	font-style:normal;
	font-weight:400 700;
	font-display:swap;
	src:url('../fonts/outfit.woff2') format('woff2');
}
@font-face{
	font-family:'Inter';
	font-style:normal;
	font-weight:400 600;
	font-display:swap;
	src:url('../fonts/inter.woff2') format('woff2');
}

:root{
	/* Brand orange scale (measured from the DetailDeco icon) */
	--dc-accent:#F25D23;
	--dc-accent-hover:#F47C43;
	--dc-accent-pressed:#D14A15;
	--dc-accent-deep:#A83A10;
	--dc-accent-glow:rgba(242,93,35,.35);
	--dc-accent-soft:rgba(242,93,35,.12);
	--dc-on-accent:#0A0A0A;

	/* Status */
	--dc-danger:#e5484d;
	--dc-danger-soft:rgba(229,72,77,.12);
	--dc-danger-text:#ffd9da;
	--dc-danger-muted:#ffb4b6;

	/* Neutrals (dark studio palette) */
	--dc-bg:#0A0A0A;
	--dc-bg-2:#0F0F0F;
	--dc-surface:#141414;
	--dc-surface-2:#1B1B1B;
	--dc-surface-3:#242424;
	--dc-border:rgba(255,255,255,.10);
	--dc-border-strong:rgba(255,255,255,.18);
	--dc-text:#F5F5F5;
	--dc-text-muted:#A6A6A6;
	--dc-heading:#FFFFFF;

	/* Shape */
	--dc-radius-sm:8px;
	--dc-radius-md:12px;
	--dc-radius-lg:18px;
	--dc-radius-xl:28px;
	--dc-radius-pill:999px;

	/* Layout */
	--dc-container:1200px;
	--dc-gap:clamp(16px,2.5vw,28px);
	--dc-section-y:clamp(56px,7vw,112px);

	/* Type */
	--dc-font-head:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	--dc-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

	/* Motion */
	--dc-ease:cubic-bezier(.22,.61,.36,1);
	--dc-dur:220ms;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
	margin:0;
	background:var(--dc-bg);
	color:var(--dc-text);
	font-family:var(--dc-font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	overflow-x:hidden;
}

img,picture,video,svg{max-width:100%;height:auto;display:block}
img{-webkit-user-drag:none}

h1,h2,h3,h4{
	font-family:var(--dc-font-head);
	color:var(--dc-heading);
	line-height:1.15;
	margin:0 0 .5em;
	font-weight:700;
	letter-spacing:-.01em;
}

p{margin:0 0 1em}

a{color:var(--dc-accent);text-decoration:none}
a:hover{color:var(--dc-accent-hover)}

::selection{background:var(--dc-accent);color:var(--dc-on-accent)}

:focus-visible{outline:2px solid var(--dc-accent);outline-offset:2px;border-radius:4px}

/* Layout primitives */
.dc-container{width:100%;max-width:var(--dc-container);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}

.dc-main{display:block;min-height:60vh}

.dc-section{padding-block:var(--dc-section-y);position:relative;scroll-margin-top:88px}

.dc-section + .dc-section{border-top:1px solid var(--dc-border)}

.dc-head{margin-bottom:clamp(24px,4vw,48px);max-width:760px}
.dc-head--center{margin-inline:auto;text-align:center}

.dc-h2{font-size:clamp(1.75rem,4vw,2.75rem)}
.dc-h3{font-size:clamp(1.25rem,2.5vw,1.75rem)}

.dc-prose{max-width:760px}
.dc-prose h2{font-size:clamp(1.35rem,3vw,1.9rem);margin-top:1.6em}
.dc-prose h3{font-size:1.15rem;margin-top:1.4em}
.dc-prose ul,.dc-prose ol{padding-left:1.25em}
.dc-prose li{margin-bottom:.4em}

/* Skip link */
.dc-skip{
	position:absolute;left:-9999px;top:0;z-index:1000;
	background:var(--dc-accent);color:var(--dc-on-accent);
	padding:12px 18px;border-radius:0 0 var(--dc-radius-sm) 0;font-weight:600;
}
.dc-skip:focus{left:0}

/* Scroll reveal */
[data-dc-reveal]{opacity:0;transform:translateY(24px);transition:opacity .6s var(--dc-ease),transform .6s var(--dc-ease)}
[data-dc-reveal].is-visible{opacity:1;transform:none}

/* Accessibility helpers */
.dc-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
	[data-dc-reveal]{opacity:1;transform:none}
}