/*
Theme Name: Helios Design
Theme URI: https://heliosdesign.vn
Author: Helios Design
Author URI: https://heliosdesign.vn
Description: Dark cinematic WordPress theme for Helios Design — a residential interior design & build studio in northern Vietnam. Warm-black canvas, sunlight amber accent, cream type, Cormorant Garamond over Be Vietnam Pro. Ships a full-screen scroll-snap "deck" page template for the one-page homepage, plus conventional templates for projects, journal and pages. Built for Elementor and Elementor Pro Theme Builder.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: helios-design-theme
Tags: custom-logo, full-width-template, elementor, one-page, interior-design, dark, editorial

Helios Design Theme © 2026
*/

/* ---------------------------------------------------------------------------
   Base reset only. All design tokens live in assets/css/tokens.css and the
   layout in assets/css/main.css; the fallbacks below keep the page readable
   in the split second before those load.
   ------------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--hl-ink, #0B0908);
	color: var(--hl-cream, #F2EAE0);
	font-family: var(--hl-f-body, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-family: var(--hl-f-display, "Cormorant Garamond", Georgia, "Times New Roman", serif);
	font-weight: 400;
	line-height: 1.14;
	letter-spacing: -.01em;
	color: var(--hl-cream, #F2EAE0);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

img, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }

a {
	color: var(--hl-sun, #D99A4E);
	text-decoration: none;
	transition: color .35s var(--hl-ease, cubic-bezier(.16,.84,.28,1));
}
a:hover { color: var(--hl-sun-hot, #F0B063); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

blockquote { margin: 0; }
figure { margin: 0; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--hl-sun, #D99A4E); color: var(--hl-ink, #0B0908); }

:focus-visible {
	outline: 2px solid var(--hl-sun-hot, #F0B063);
	outline-offset: 3px;
}

/* Accessible skip link — visible only when focused. */
.hl-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--hl-sun, #D99A4E);
	color: #1A1207;
	font-size: .74rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.hl-skip-link:focus {
	left: 12px;
	top: 12px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}