/*
Theme Name:   DXQ Child Theme
Theme URI:    https://dxq.ae/
Description:  Child theme of Hello Elementor for DXQ Sovereign Intelligence. White canvas, Sovereign Navy type, Meridian Teal as the single accent. All site behaviour lives in the DXQ Core must use plugin, so this theme can be switched off at any time without losing the Products post type or the private login.
Author:       Zahid Hussain
Author URI:   https://dxq.ae/
Template:     hello-elementor
Version:      1.0.0
Text Domain:  dxq-child
License:      Proprietary
Tags:         elementor, one-column, custom-colors, custom-menu, editor-style
*/

/* ==========================================================================
   Brand tokens. Use these anywhere, including inside Elementor custom CSS,
   so a colour is only ever changed in one place.
   ========================================================================== */

:root {
	--dxq-navy: #102745;        /* all type, and the only colour that may cover a full page */
	--dxq-teal: #00A9A1;        /* single accent: rules, active states, the Meridian */
	--dxq-white: #FFFFFF;
	--dxq-alabaster: #FBF8F4;
	--dxq-travertine: #E4D8CB;
	--dxq-bronze: #B99A73;      /* fabrication only, not for screen */
	--dxq-slate: #6E7A88;
	--dxq-pale: #D9EFED;

	--dxq-navy-80: #40526A;
	--dxq-navy-70: #58687D;
	--dxq-navy-25: #C3C9D0;
	--dxq-navy-10: #E7E9EC;

	--dxq-display: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
	--dxq-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--dxq-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

	--dxq-container: 1320px;
	--dxq-margin: max(5vw, 24px);
}

/* ==========================================================================
   Base. Kept deliberately short. Layout and section design belong in
   Elementor, not here.
   ========================================================================== */

body {
	background: var(--dxq-white);
	color: var(--dxq-navy);
	font-family: var(--dxq-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	hyphens: none;
}

h1, h2, h3, h4 {
	font-family: var(--dxq-display);
	font-weight: 300;
	letter-spacing: 0;
	color: var(--dxq-navy);
}

h3, h4 { font-weight: 500; }

p { max-width: 70ch; }

a { color: var(--dxq-navy); text-underline-offset: 3px; }
a:hover, a:focus-visible { text-decoration-color: var(--dxq-teal); }

:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--dxq-white), 0 0 0 4px var(--dxq-teal);
}

/* Small label, the site's standard eyebrow above a heading.
   Use as:  <p class="dxq-label">Sovereign compute</p>  */
.dxq-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	font-family: var(--dxq-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--dxq-navy-70);
}

.dxq-label::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--dxq-teal);
}

/* A teal rule, for section breaks. */
.dxq-rule {
	display: block;
	width: 88px;
	height: 2px;
	border: 0;
	background: var(--dxq-teal);
	margin: 40px 0;
}

/* ==========================================================================
   YOUR CSS BELOW THIS LINE
   ========================================================================== */