/* ──────────────────────────────────────────────────────────────
   Casaley Officer — Colors & Type
   Finished, turnkey homes in one of Melbourne's growing communities.

   Structure mirrors the Alba Parkdale stylesheet one-for-one; only the
   values change. Every colour below is sampled from the supplied master
   brandmark SVGs rather than approximated by eye.
   ────────────────────────────────────────────────────────────── */

/* === Fonts ==================================================== */
/* Host Grotesk, variable 300–800, self-hosted.
   To serve the Adobe Fonts (Typekit) cut instead, delete these four
   @font-face blocks and add your kit to index.html — --font-display and
   --font-sans already ask for "Host Grotesk" first. */

@font-face {
  font-family: "Host Grotesk";
  src: url("./fonts/host-grotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("./fonts/host-grotesk-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("./fonts/host-grotesk-italic-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Host Grotesk";
  src: url("./fonts/host-grotesk-italic-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === Color tokens ============================================= */
:root {
  /* The four brand colours, straight from the master brandmark artwork */
  --casaley-royal-blue: #34469d;
  --casaley-royal-blue-light: #4a5cba;
  --casaley-royal-blue-deep: #263474;

  --casaley-orange: #df5a3a;
  --casaley-orange-soft: #e8815f;
  --casaley-orange-deep: #c14526;

  --casaley-velvet: #8b4749;
  --casaley-velvet-soft: #a35d5f;
  --casaley-velvet-deep: #6f383a;

  --casaley-pink: #e4c3bc;
  --casaley-pink-light: #f2e2dd;
  --casaley-pink-deep: #d3a89f;
  --casaley-bone: #fbf5f3;

  --bg: var(--casaley-pink-light);
  --bg-elevated: var(--casaley-bone);
  --bg-deep: var(--casaley-pink);
  --bg-blue: var(--casaley-royal-blue);
  --bg-velvet: var(--casaley-velvet);
  --bg-orange: var(--casaley-orange);

  --fg1: var(--casaley-royal-blue);
  --fg2: var(--casaley-velvet);
  --fg3: #a2837e;
  --fg-on-blue: var(--casaley-pink-light);
  --fg-on-orange: var(--casaley-royal-blue);
  --fg-on-velvet: var(--casaley-pink-light);
  --fg-inverse: var(--casaley-pink-light);

  --line-subtle: rgba(52, 70, 157, 0.12);
  --line: rgba(52, 70, 157, 0.22);
  --line-on-blue: rgba(242, 226, 221, 0.30);
  --line-on-velvet: rgba(242, 226, 221, 0.28);

  --focus-ring: 0 0 0 2px var(--casaley-bone), 0 0 0 4px var(--casaley-royal-blue);

  /* === Brand pattern ========================================== */
  --pattern-tile: url("./assets/pattern-tile.svg");
  --pattern-size: 196px 217px;

  /* === Type scale ============================================= */
  /* Casaley runs a single-family system: Host Grotesk carries display,
     body and utility roles, separated by weight and tracking rather than
     by a second typeface. */
  --font-display: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Host Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Host Grotesk", ui-monospace, "SF Mono", Menlo, monospace;

  --track-eyebrow: 0.22em;
  --track-tight: -0.01em;
  --track-display: -0.025em;

  --lh-display: 1.02;
  --lh-heading: 1.08;
  --lh-body: 1.55;
  --lh-tight: 1.25;

  /* === Spacing scale (8pt grid) =============================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* === Radii =================================================== */
  --radius-0: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* === Shadows ================================================= */
  --shadow-soft: 0 8px 30px -12px rgba(38, 52, 116, 0.18);
  --shadow-deep: 0 24px 60px -20px rgba(38, 52, 116, 0.32);
  --shadow-press: 0 2px 6px -2px rgba(38, 52, 116, 0.20);

  /* === Motion ================================================== */
  --ease-curtain: cubic-bezier(0.25, 0.10, 0.25, 1.00);
  --ease-soft: cubic-bezier(0.32, 0.72, 0.00, 1.00);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 720ms;
  --dur-curtain: 1100ms;
}

/* === Semantic typography classes ================================ */
.casaley-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
  line-height: 1.2;
}

.casaley-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(96px, 16vw, 240px);
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-transform: uppercase;
}

.casaley-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 88px);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}

.casaley-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 56px);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  color: var(--fg1);
}

.casaley-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: var(--lh-heading);
  color: var(--fg1);
}

.casaley-lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  color: var(--fg2);
}

.casaley-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--fg1);
}

.casaley-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2);
}

.casaley-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg2);
}

.casaley-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.85;
}