/* =============================================================================
   Stone Galleria — redesign theme layer
   -----------------------------------------------------------------------------
   Design language extracted from the reference site (stonium.in) via REA
   runtime observation (see README "Redesign" section):

     - Typography      Inter / Inter Display / Geist / Urbanist / Switzer
                       (self-hosted in /assets/redesign/fonts.css)
     - Palette         white paper, near-black ink, warm cream, soft greys
     - Shape language  100px pills, 24px panels, 16px cards, 4px thumbs
     - Rhythm          72-96px editorial section spacing, 1400px canvas
     - Motion          soft fades, lifts, image zooms, marquees

   This file only *styles* existing markup. It never changes structure, hides
   interactive elements, or touches JavaScript-driven layouts.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
	/* palette (mapped from the reference design tokens) */
	--rd-black: #000000;
	--rd-ink: #0d0d0d;
	--rd-ink-2: #212121;
	--rd-paper: #ffffff;
	--rd-grey-50: #fafafa;
	--rd-grey-100: #f5f5f5;
	--rd-grey-150: #f1f1f1;
	--rd-grey-200: #e6e6e6;
	--rd-grey-300: #cccccc;
	--rd-grey-400: #bdbdbd;
	--rd-grey-500: #999999;
	--rd-grey-600: #666666;
	--rd-grey-700: #4d4d4d;
	--rd-cream: #f1dfc2;
	--rd-cream-soft: #f7efe1;
	--rd-gold: #deab02;
	--rd-orange: #ff5e2b;
	--rd-lime: #9cff33;
	--rd-line: rgba(13, 13, 13, 0.08);
	--rd-line-strong: rgba(13, 13, 13, 0.14);

	/* type */
	--rd-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--rd-font-display: 'Inter Display', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--rd-font-geist: 'Geist', 'Inter', system-ui, sans-serif;
	--rd-font-accent: 'Urbanist', 'Inter', system-ui, sans-serif;
	--rd-font-caps: 'Switzer', 'Inter', system-ui, sans-serif;

	/* shape */
	--rd-pill: 100px;
	--rd-radius-xl: 24px;
	--rd-radius-lg: 16px;
	--rd-radius-md: 12px;
	--rd-radius-sm: 6px;
	--rd-radius-xs: 4px;

	/* rhythm */
	--rd-canvas: 1400px;
	--rd-gutter: clamp(20px, 3.4vw, 48px);
	--rd-section-y: clamp(56px, 6.7vw, 96px);
	--rd-header-h: 80px;

	/* elevation */
	--rd-shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.05);
	--rd-shadow-md: 0 14px 34px -18px rgba(13, 13, 13, 0.25);
	--rd-shadow-lg: 0 30px 60px -30px rgba(13, 13, 13, 0.35);

	/* motion */
	--rd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--rd-dur: 0.45s;
}

/* ------------------------------------------------- legacy token remap --- */
/* Several mirrored pages ship their own "sg-*" palette (warm stone + gold).
   The redesign palette is paper / ink / cream, so those tokens are re-pointed
   at the new system — the pages keep their own layout, the colour language
   becomes consistent with the rest of the site. */
html:root {
	--sg-ink: #0d0d0d;
	--sg-body: #4d4d4d;
	--sg-muted: #999999;
	--sg-gold: #0d0d0d;
	--sg-gold-soft: rgba(13, 13, 13, 0.06);
	--sg-hair: rgba(13, 13, 13, 0.09);
	--sg-paper: #ffffff;
	--sg-dark: #000000;
	--sg-dark-2: #0d0d0d;
	--sg-gold-lt: #f1dfc2;
	--sg-ink-dark: #ffffff;
	--sg-muted-dark: rgba(255, 255, 255, 0.6);
	--sg-hair-dark: rgba(255, 255, 255, 0.12);
	--sgccb-heading: #0d0d0d;
	--sgccb-body: #4d4d4d;
	--sgccb-line: rgba(13, 13, 13, 0.12);
}

/* dark panels keep the accent legible — cream instead of ink */
.contact-signature,
.contact-inner,
.contact-signature .contact-inner,
.dark-panel,
.contact-section--dark {
	--sg-gold: #f1dfc2;
	--sg-gold-soft: rgba(241, 223, 194, 0.12);
	--sg-ink: #ffffff;
	--sg-body: rgba(255, 255, 255, 0.72);
	--sg-muted: rgba(255, 255, 255, 0.5);
	--sg-hair: rgba(255, 255, 255, 0.12);
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body,
body.page-body {
	background: var(--rd-paper) !important;
	color: var(--rd-ink) !important;
	font-family: var(--rd-font) !important;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: -0.01em;
	font-feature-settings: 'ss01' on, 'cv05' on;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--rd-ink);
	color: var(--rd-paper);
}

/* headers / paragraph rhythm ------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	color: var(--rd-ink) !important;
	font-family: var(--rd-font-display) !important;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.14;
	margin-bottom: 0.45em;
	text-wrap: balance;
}

h1,
.h1 {
	font-size: clamp(36px, 4.8vw, 68px);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.03;
}

h2,
.h2 {
	font-size: clamp(30px, 4.3vw, 62px);
	letter-spacing: -0.04em;
	line-height: 1.08;
}

h3,
.h3 {
	font-size: clamp(22px, 2.6vw, 34px);
	letter-spacing: -0.03em;
	line-height: 1.15;
}

h4,
.h4 {
	font-size: clamp(18px, 1.95vw, 27px);
	letter-spacing: -0.025em;
	line-height: 1.2;
}

h5,
.h5 {
	font-size: clamp(16px, 1.4vw, 20px);
	letter-spacing: -0.02em;
}

h6,
.h6 {
	font-size: 16px;
	letter-spacing: -0.015em;
}

p {
	color: var(--rd-grey-700);
	letter-spacing: -0.01em;
}

p.lead {
	color: var(--rd-ink-2);
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.5;
	letter-spacing: -0.02em;
}

a {
	color: var(--rd-ink);
	text-decoration-color: rgba(13, 13, 13, 0.25);
	text-underline-offset: 3px;
	transition: color 0.25s var(--rd-ease), opacity 0.25s var(--rd-ease);
}

a:hover {
	color: var(--rd-black);
	text-decoration-color: currentColor;
}

strong,
b {
	font-weight: 600;
}

hr {
	border: 0;
	border-top: 1px solid var(--rd-line);
	opacity: 1;
}

img {
	image-rendering: auto;
}

::placeholder {
	color: var(--rd-grey-500) !important;
	opacity: 1;
}

/* small caps kicker labels (.text-uppercase is used all over the mirror) */
.text-uppercase,
.small-caps {
	letter-spacing: 0.12em !important;
}

/* -------------------------------------------------------------- layout -- */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	--bs-gutter-x: 2.5rem;
	width: 100%;
	margin-inline: auto;
}

@media (min-width: 1200px) {
	.container,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: var(--rd-canvas);
		padding-inline: var(--rd-gutter);
	}
}

/* section rhythm: every mirrored content band breathes like the reference */
.sub-section {
	padding-block: var(--rd-section-y) !important;
}

.sub-section .sub-section,
.sub-section.nested {
	padding-block: 0 !important;
}

/* the reference's favourite light bands */
.bg-f7f7f7,
.bg-f7 {
	background-color: var(--rd-grey-50) !important;
}

/* ----------------------------------------------------------------- nav -- */
.dropdown-menu {
	border: 1px solid var(--rd-line) !important;
	border-radius: var(--rd-radius-md) !important;
	box-shadow: var(--rd-shadow-md) !important;
	padding: 10px !important;
	background: var(--rd-paper) !important;
	min-width: 230px;
}

.dropdown-item {
	border-radius: var(--rd-radius-sm);
	color: var(--rd-ink-2) !important;
	font-size: 15px;
	padding: 9px 14px;
	white-space: normal;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
	background: var(--rd-grey-100) !important;
	color: var(--rd-black) !important;
}

/* breadcrumbs + small meta rows */
.breadcrumb {
	--bs-breadcrumb-divider-color: var(--rd-grey-400);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rd-grey-500) !important;
}

.breadcrumb-item,
.breadcrumb-item a {
	color: var(--rd-grey-500) !important;
	text-decoration: none;
}

.breadcrumb-item a:hover {
	color: var(--rd-ink) !important;
}

/* text utility remaps */
.text-muted {
	color: var(--rd-grey-600) !important;
}

.text-white-50 {
	color: rgba(255, 255, 255, 0.62) !important;
}

/* scrollbars (desktop) keep the interface quiet */
@media (min-width: 992px) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--rd-grey-300) transparent;
	}
}