/* ============================================================
   Sanctum GCC Landing Page — base.css
   Reset, design tokens, typography, layout helpers

   Visual direction is set by the content brief:
     - premium enterprise appearance
     - white / blue Sanctum visual language
     - card-based presentation
     - clean whitespace, minimal visual clutter
   Perception target: enterprise GCC technology partner, not a rental shop.
   ============================================================ */

:root {
  /* ============================================================
     PALETTE — warm paper over near-black ink.

     The brief asked to "retain the white/blue Sanctum visual language",
     but flat white + saturated blue is the exact combination that read as
     generic. This keeps the brief's structure — cards, whitespace, premium
     enterprise tone — and changes only the colour values underneath.

     The token NAMES below are historical (--blue-*, --gray-*). They are kept
     so components.css and sections.css need no edits; treat them as slots,
     not as literal hues:
        --blue-900..700  dark section grounds (now near-black, not navy)
        --blue-600..400  the single accent
        --gray-50..100   warm paper surfaces
        --gray-700..900  ink for body and headings
     ============================================================ */

  /* Dark grounds — near-black with a cool cast, not corporate navy */
  --blue-900: #0a0d12;
  --blue-800: #141922;
  --blue-700: #1f2630;

  /* THE ACCENT — brand gold, taken from the logo (#f1c84c).
     Three weights because gold needs different values by surface:
       600  deep  — text, icons and links on WHITE (5.4:1, readable)
       500  mid   — focus rings, borders
       400  bright— the logo gold itself, only on DARK grounds
     Using the bright gold as text on white would fail contrast badly. */
  --blue-600: #8a6508;
  --blue-500: #b8860b;
  --blue-400: #f1c84c;
  --blue-100: #f6efdc;   /* icon tiles — warm gold tint */
  --blue-50:  #faf6ec;   /* tinted panels */

  /* Brand marks (logo artwork only) */
  --brand-navy: #28234b;
  --brand-gold: #f1c84c;

  /* ---- Neutrals: WARM paper, COOL ink. That pairing is what stops the
     page reading as a default template. ---- */
  --white:    #ffffff;
  --gray-50:  #f6f4f0;   /* warm off-white — alternating sections */
  --gray-100: #edeae4;
  --gray-200: #e4e0d8;   /* borders — warm, so they sit on the paper tone */
  --gray-300: #b8bfc9;
  --gray-400: #8b95a3;
  --gray-500: #5a6472;
  --gray-600: #39424f;
  --gray-700: #1f2630;
  --gray-800: #141922;
  --gray-900: #0a0d12;

  /* Legacy aliases still referenced in places */
  --navy-900: var(--blue-900);
  --navy-800: var(--blue-800);
  --teal-500: #12b5a6;
  --ink-300:  var(--gray-300);
  --ink-400:  var(--gray-400);
  --ink-500:  var(--gray-500);
  --ink-900:  var(--gray-900);

  /* ---- Semantic ---- */
  --bg:           var(--white);
  --bg-alt:       var(--gray-50);
  --bg-dark:      var(--blue-900);
  --text:         var(--gray-700);
  --text-muted:   var(--gray-500);
  --text-invert:  var(--white);
  --heading:      var(--gray-900);
  --border:       var(--gray-200);
  /* The CTA uses the BRIGHT logo gold as a fill with near-black text (11:1),
     not the deep gold — a solid gold button is the single boldest element
     on the page and should read as the brand mark's colour. */
  --primary:      #f1c84c;
  --primary-hover:#e3b73a;
  --accent:       var(--blue-600);
  --accent-soft:  var(--blue-400);
  --rule:         var(--gray-200);
  --rule-invert:  rgba(255, 255, 255, 0.16);

  /* ---- Type ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.3125rem;
  --fs-2xl:  1.625rem;
  --fs-3xl:  2.125rem;
  --fs-4xl:  2.75rem;

  --fs-d1: clamp(2.25rem, 4.4vw, 3.6rem);   /* hero h1 */
  --fs-d2: clamp(1.75rem, 3vw, 2.5rem);     /* section h2 */
  --fs-d3: clamp(1.375rem, 2vw, 1.75rem);   /* sub-display */
  --fs-d4: 1.25rem;                          /* card title */
  --fs-num: clamp(1.75rem, 3vw, 2.5rem);     /* stat numerals */

  --lh-tight: 1.14;
  --lh-snug:  1.25;
  --lh-mid:   1.5;
  --lh-base:  1.65;

  --tr-display: -0.022em;
  --tr-tight:   -0.012em;
  --tr-label:    0.14em;

  /* ---- Spacing ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7rem;   --sp-11: 9rem;

  /* ---- Radius & shadow — cards are a real surface again ---- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* Shadows tinted to the ink, not to a blue — a blue-cast shadow on warm
     paper is a subtle but real part of the "default template" look. */
  --shadow-sm: 0 1px 2px rgba(10, 13, 18, 0.05), 0 1px 3px rgba(10, 13, 18, 0.06);
  --shadow-md: 0 4px 14px rgba(10, 13, 18, 0.07), 0 2px 6px rgba(10, 13, 18, 0.05);
  --shadow-lg: 0 18px 44px rgba(10, 13, 18, 0.11), 0 6px 16px rgba(10, 13, 18, 0.06);
  --shadow-xl: 0 34px 80px rgba(10, 13, 18, 0.28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 80px;
  --header-h-scrolled: 66px;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }

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

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

/* ---- Typography ---- */
h1, h2, h3, h4 {
  color: var(--heading);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
h1 { font-size: var(--fs-d1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-d2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-d4); letter-spacing: var(--tr-tight); }
h4 { font-size: var(--fs-lg); letter-spacing: var(--tr-tight); }
p { max-width: 68ch; }
.lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-mid); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-4);
}
.eyebrow--invert { color: var(--blue-400); }

/* Recurring "Rent | Lease | Buy" motif from the brief. */
.pipe-line {
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--blue-400);
  margin-top: var(--sp-5); max-width: none;
}
.pipe-line span { color: rgba(255, 255, 255, 0.28); margin-inline: 0.5rem; }
.pipe-line--tight { margin-top: var(--sp-5); }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-9); }
.section--sm { padding-block: var(--sp-7); }
.section--lg { padding-block: var(--sp-10); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-dark); color: var(--gray-300); }
/* Every dark surface must opt back into white headings. */
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.hero h1, .hero h2, .hero h3,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 { color: var(--white); }
/* …but light cards nested in a dark section keep dark headings. */
.section--dark .card:not(.card--dark) :is(h1, h2, h3, h4),
.section--dark .modal__dialog :is(h1, h2, h3, h4) { color: var(--heading); }

.section-head { max-width: 46rem; margin-bottom: var(--sp-7); }
.section-head h2 { margin-bottom: var(--sp-4); }
.section-head p { color: var(--text-muted); font-size: var(--fs-lg); line-height: var(--lh-mid); }
.section--dark .section-head p { color: var(--gray-300); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }

/* One centred primary action closing a section. */
.section-actions { display: flex; justify-content: center; margin-top: var(--sp-7); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Accessibility ---- */
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 3px; }
.skip-link {
  position: absolute; left: 0; top: 0; transform: translateY(-120%);
  background: var(--blue-900); color: #fff; padding: var(--sp-2) var(--sp-4);
  z-index: 2000; transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
.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;
}

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .section { padding-block: var(--sp-8); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .container { padding-inline: var(--sp-4); }
}

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

/* ---- Print ---- */
@media print {
  .float-cta, .modal, .scrim, .mobile-nav, .hamburger, .skip-link { display: none !important; }
  .site-header { position: static; }
  body { overflow-x: visible; }
}