/*
  base.css — DAL Website (HTML/CSS/JS rebuild)
  Global foundations only. No page/section layout lives here yet —
  that arrives in later phases (Phase 1+).

  Mirrors the master project's foundational rules from app/globals.css:
  html/body background+color, ::selection, :focus-visible, and the
  global prefers-reduced-motion override. Requires tokens.css to be
  loaded first.
*/

/* ---------------------------------------------------------------
   Self-hosted fonts (locked decision: self-hosted WOFF2, no Google
   Fonts CDN at runtime). Single variable-font file per family,
   restricted to the weight range actually used by the master site.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("../assets/fonts/Cairo-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
    U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ---------------------------------------------------------------
   Reset / normalization
   --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--color-hairline);
}

html {
  background: var(--color-void);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--color-void);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------
   RTL / LTR foundation
   Direction and per-locale font stack are driven by the <html
   lang dir> pair set on every page — no per-component duplication
   needed. Use logical properties (margin-inline, padding-inline,
   text-align: start/end, inset-inline) in component CSS added in
   later phases rather than left/right physical properties.
   --------------------------------------------------------------- */
html[dir="rtl"] body {
  direction: rtl;
}

html[dir="ltr"] body {
  direction: ltr;
}

/* ---------------------------------------------------------------
   Typography foundations
   --------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
}

p {
  max-width: 65ch;
}

.font-display {
  font-family: var(--font-display);
}

/* ---------------------------------------------------------------
   Links / buttons baseline
   --------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration: none;
}

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

/* ---------------------------------------------------------------
   Images / media
   --------------------------------------------------------------- */
img,
picture,
svg {
  display: block;
  max-width: 100%;
}

/* ---------------------------------------------------------------
   Containers (shared max-width scale, see tokens.css)
   --------------------------------------------------------------- */
.container {
  width: 92%;
  max-width: var(--container-shell);
  margin-inline: auto;
}

/* ---------------------------------------------------------------
   Accessibility foundations
   --------------------------------------------------------------- */
::selection {
  background: var(--color-accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/*
  Matches the master project's header skip-link exactly
  (components/layout/Header.tsx): visually hidden until focused, then
  an accent pill fixed near the top-start corner, above the mobile
  nav overlay (z-overlay).
*/
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus-visible {
  position: fixed;
  inset-inline-start: 1rem;
  top: 1rem;
  z-index: calc(var(--z-overlay) + 1);
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.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;
}

/* ---------------------------------------------------------------
   Reduced-motion baseline
   Matches the master project's global override in app/globals.css:
   every animation/transition collapses to effectively-instant, and
   smooth scroll is disabled, for anyone with the OS preference set.
   Per-component "freeze to final state" rules are added alongside
   each component's own animation in later phases.
   --------------------------------------------------------------- */
@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;
  }
}