/* ==========================================================
   main.css — MSQUARE Works (FINAL + VALID)
   NOTE: @import rules MUST come first (after @charset only).
   ========================================================== */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,400;1,600&family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

/* File imports (order matters for cascade, but @import must be first) */
@import "./css/reset.css";
@import "./css/layout.css";
@import "./css/components.css";

/* ----------------------------------------------------------
   Design tokens
   ---------------------------------------------------------- */

:root {
  /* ---- Brand primary ------------------------------------ */
  --colour-primary:        #2a231f;
  --colour-primary-hover:  #1e1814;
  --colour-primary-mid:    #5c4e46;
  --colour-primary-tint:   #f0ede9;

  /* ---- Accent: Terracotta (action / CTA) ---------------- */
  --colour-accent-terra:       #B85C38;
  --colour-accent-terra-hover: #A34F2E;
  --colour-accent-terra-tint:  #F6E8DF;

  /* ---- Accent: Sage (trust / status) -------------------- */
  --colour-accent-sage:        #5E7A64;
  --colour-accent-sage-hover:  #4D6653;
  --colour-accent-sage-tint:   #E0EBE3;

  /* ---- Canvas ------------------------------------------ */
  --colour-bg-primary:     #FAFAF8;
  --colour-bg-secondary:   #F2EDE6;
  --colour-bg-tertiary:    #E8E0D6;

  /* ---- Text --------------------------------------------- */
  --colour-text-primary:   #2a231f;
  --colour-text-secondary: #5c534c;
  --colour-text-muted:     #9a928a;
  --colour-text-inverse:   #ffffff;

  /* ---- Borders ------------------------------------------ */
  --colour-border-subtle:  #E0D8CE;
  --colour-border-strong:  #C4BAB0;

  /* ---- Signal — functional only, never decorative ------- */
  --colour-signal-success: #5E7A64;
  --colour-signal-warning: #a57528;
  --colour-signal-error:   #8b3a2b;

  /* ---- Warm highlight ----------------------------------- */
  --colour-warm:           #e0c9ae;

  /* ---- Typography --------------------------------------- */
  --font-display:   "Space Grotesk", system-ui, sans-serif;
  --font-base:      "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --font-size-xs:  0.6875rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.375rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.5rem;
  --font-size-display: clamp(2.75rem, 5.5vw, 5rem);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.1;
  --line-height-snug:   1.3;
  --line-height-normal: 1.55;
  --line-height-loose:  1.75;

  /* ---- Spacing ------------------------------------------ */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* ---- Shape -------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ---- Shadows ------------------------------------------ */
  --shadow-sm:
    0 0 0 1px rgba(42,35,31,.05),
    0 1px 3px rgba(42,35,31,.07),
    0 2px 6px rgba(42,35,31,.04);

  --shadow-md:
    0 0 0 1px rgba(42,35,31,.06),
    0 2px 6px rgba(42,35,31,.08),
    0 8px 20px rgba(42,35,31,.08);

  --shadow-lg:
    0 0 0 1px rgba(42,35,31,.06),
    0 4px 12px rgba(42,35,31,.1),
    0 20px 48px rgba(42,35,31,.12);

  /* ---- Layout ------------------------------------------- */
  --layout-max-width:     1200px;
  --layout-content-width: 960px;

  /* ---- Interaction -------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast:   140ms var(--ease-out);
  --transition-normal: 220ms var(--ease-out);
  --transition-slow:   400ms var(--ease-out);

  --focus-ring:        2px solid var(--colour-primary);
  --focus-ring-offset: 2px;
}

/* ----------------------------------------------------------
   Grain texture token (applied via layout.css to dark sections)
   ---------------------------------------------------------- */

:root {
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------
   Global base
   ---------------------------------------------------------- */

html {
  color-scheme: only light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--colour-bg-secondary);
  color: var(--colour-text-primary);
  font-family: var(--font-base);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* Display font on all structural headings */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: var(--line-height-tight);
}

h4 {
  letter-spacing: -0.01em;
}

p {
  max-width: 70ch;
}

/* ----------------------------------------------------------
   Hero entrance animation (optional, safe)
   ---------------------------------------------------------- */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

main > .section--primary:first-child .banner__eyebrow {
  animation: fadeUp 0.5s var(--ease-out) 0.05s both;
}

main > .section--primary:first-child .banner__title {
  animation: fadeUp 0.6s var(--ease-out) 0.14s both;
}

main > .section--primary:first-child .banner__lead {
  animation: fadeUp 0.6s var(--ease-out) 0.26s both;
}

main > .section--primary:first-child .stack,
main > .section--primary:first-child .cta__actions {
  animation: fadeUp 0.6s var(--ease-out) 0.38s both;
}

/* ----------------------------------------------------------
   Scroll reveal helper (used by JS)
   ---------------------------------------------------------- */

.will-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

/* ----------------------------------------------------------
   Utility
   ---------------------------------------------------------- */

.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}