/*
  Presbury Group - shared design tokens
  Used by: main site, realty public site, realty admin panel, archive/portfolio wrappers.
  Colors derived from template_images/logo.gif (navy + red + light-blue flag mark).
*/

:root {
  /* Brand */
  --brand-navy: #14205c;
  --brand-navy-dark: #0c1440;
  --brand-blue: #2f5fd6;
  --brand-blue-light: #aec6f2;
  --brand-red: #d0271c;
  --brand-red-dark: #a91e15;

  /* Neutrals */
  --n-0: #ffffff;
  --n-50: #f7f8fb;
  --n-100: #eef0f6;
  --n-200: #dfe3ee;
  --n-300: #c7cce0;
  --n-500: #737a94;
  --n-700: #454b63;
  --n-800: #2b3049;
  --n-900: #171a2b;

  /* Semantic */
  --color-bg: var(--n-50);
  --color-surface: var(--n-0);
  --color-border: var(--n-200);
  --color-text: var(--n-900);
  --color-text-muted: var(--n-500);
  --color-primary: var(--brand-blue);
  --color-primary-strong: var(--brand-navy);
  --color-accent: var(--brand-red);
  --color-success: #1c7c47;
  --color-success-bg: #e7f6ee;
  --color-danger: var(--brand-red-dark);
  --color-danger-bg: #fbeceb;

  /* Typography */
  --font-sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --lh-base: 1.6;

  /* Spacing (4px scale) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(23, 26, 43, 0.06), 0 1px 3px rgba(23, 26, 43, 0.08);
  --shadow-md: 0 4px 12px rgba(23, 26, 43, 0.10);
  --shadow-lg: 0 12px 32px rgba(23, 26, 43, 0.16);

  /* Layout */
  --container-max: 1120px;
  --header-height: 88px;
}

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

html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
}

/* Pins the footer to the bottom of the viewport on short pages, while
   still letting it sit naturally below tall content (not fixed/floating). */
body > main { flex: 1 0 auto; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--sp-3); font-weight: 700; color: var(--color-primary-strong); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--sp-4); }
a { color: var(--color-primary); }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -48px;
  background: var(--color-primary-strong);
  color: var(--n-0);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--sp-3); }