/*! Draftingware Confidential. Copyright (c) 2024–2026 Draftingware Technologies Pvt. Ltd. All rights reserved. */

/* ─── Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

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

body {
   font-family: var(--font-display);
   font-size: var(--type-body-size);
   line-height: var(--type-body-lh);
   color: var(--color-text-primary);
   background-color: var(--color-bg-base);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
}

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

a {
   color: inherit;
   text-decoration: none;
}

button {
   font-family: inherit;
   cursor: pointer;
   border: none;
   background: none;
}

ul,
ol {
   list-style: none;
}

/* ─── Skip link ──────────────────────────────────────────── */
.skip-link {
   position: absolute;
   top: -100%;
   left: var(--space-3);
   z-index: 9999;
   padding: var(--space-1) var(--space-2);
   background: var(--color-accent-amber);
   color: var(--color-bg-base);
   font-family: var(--font-mono);
   font-size: var(--type-mono-nav-size);
   letter-spacing: var(--type-mono-nav-ls);
   text-transform: uppercase;
   border-radius: 4px;
   transition: top var(--transition-fast);
}

.skip-link:focus {
   top: var(--space-2);
}

/* ─── Typography scale ───────────────────────────────────── */
.type-hero {
   font-size: var(--type-hero-size);
   line-height: var(--type-hero-lh);
   letter-spacing: var(--type-hero-ls);
   font-weight: var(--type-hero-weight);
}

.type-section {
   font-size: var(--type-section-size);
   line-height: var(--type-section-lh);
   letter-spacing: var(--type-section-ls);
   font-weight: var(--type-section-weight);
}

.type-menu {
   font-size: var(--type-menu-size);
   line-height: var(--type-menu-lh);
   letter-spacing: var(--type-menu-ls);
   font-weight: var(--type-menu-weight);
}

.type-subhead {
   font-size: var(--type-subhead-size);
   line-height: var(--type-subhead-lh);
   font-weight: 400;
}

.type-body {
   font-size: var(--type-body-size);
   line-height: var(--type-body-lh);
   font-weight: 400;
}

.type-small {
   font-size: var(--type-small-size);
   line-height: var(--type-small-lh);
   font-weight: 400;
}

.type-mono-nav {
   font-family: var(--font-mono);
   font-size: var(--type-mono-nav-size);
   letter-spacing: var(--type-mono-nav-ls);
   text-transform: uppercase;
}

.type-mono-label {
   font-family: var(--font-mono);
   font-size: var(--type-mono-label-size);
   letter-spacing: var(--type-mono-label-ls);
   text-transform: uppercase;
}

.type-mono-hud {
   font-family: var(--font-mono);
   font-size: var(--type-mono-hud-size);
   letter-spacing: var(--type-mono-hud-ls);
   text-transform: uppercase;
}

/* ─── Layout utilities ───────────────────────────────────── */
.container {
   width: 100%;
   max-width: var(--content-max-width);
   margin-inline: auto;
   padding-inline: var(--page-margin);
}

.section-pad {
   padding-block: var(--section-pad-v);
}

/* ─── Section label (global utility) ────────────────────── */
.section-label {
   font-family: var(--font-mono, "Fira Code", "Courier New", monospace);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(0, 0, 0, 0.6);
   display: block;
   margin-bottom: 16px;
}

/* ─── Screen-reader only ─────────────────────────────────── */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* ─── Rotate-device overlay ──────────────────────────────── */
.rotate-overlay {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 9999;
   background: #f5f5f7;
   align-items: center;
   justify-content: center;
}

.rotate-overlay__inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   color: #1d1d1f;
   font-size: 14px;
   font-family: var(--font-display);
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}