/* ============================================================
   INGLIS DESIGN SYSTEM — Colours & Typography
   William Inglis & Son Limited — Established 1867
   ============================================================
   Inglis is a heritage brand built on restraint: one hero blue,
   white space, black body text, and Optima for display. Use the
   semantic tokens below; reach for raw values only when defining
   new tokens.
   ============================================================ */

:root {
  /* ===========================================================
     COLOUR — RAW PALETTE
     The blue does most of the brand work. Everything else is
     near-neutral by design.
     =========================================================== */
  --inglis-blue:        #3858A7;  /* canonical hero — Pantone 2728 C approx */
  --inglis-blue-web:    #3859A8;  /* legacy web value, visually identical */
  --inglis-blue-dark:   #2C4684;  /* hover / pressed / deep panels */
  --inglis-blue-darker: #21345F;  /* footer, deep type on tint */
  --inglis-blue-tint:   #EAEEF6;  /* pale blue wash for panels/rows */

  --white:        #FFFFFF;
  --black:        #000000;        /* body text */
  --warm-grey:    #6F6F6F;        /* rules, dividers, captions */
  --light-grey:   #F2F2F2;        /* backgrounds, panels */
  --mid-grey:     #D8D8D8;        /* borders, hairlines */
  --hairline:     #E4E4E4;        /* subtle dividers on white */

  /* Campaign / sub-brand accents — use ONLY in stated context */
  --inglis-pink:  #E5007D;        /* Pink Bonus Series */
  --race-gold:    #C8A14B;        /* Race Series gold / champagne */

  /* Status (operational UI only — not brand collateral) */
  --positive:     #2E7D4F;
  --negative:     #B23A3A;

  /* ===========================================================
     COLOUR — SEMANTIC TOKENS
     =========================================================== */
  --fg-1:         var(--black);        /* primary body text */
  --fg-2:         #333333;             /* secondary text */
  --fg-muted:     var(--warm-grey);    /* captions, meta */
  --fg-on-blue:   var(--white);        /* text on Inglis Blue */

  --bg-page:      var(--white);
  --bg-panel:     var(--light-grey);
  --bg-tint:      var(--inglis-blue-tint);
  --bg-brand:     var(--inglis-blue);
  --bg-footer:    var(--inglis-blue-darker);

  --border:       var(--mid-grey);
  --divider:      var(--hairline);
  --rule-strong:  var(--warm-grey);

  --link:         var(--inglis-blue);
  --link-hover:   var(--inglis-blue-dark);

  /* ===========================================================
     TYPOGRAPHY — FAMILIES
     Optima is display-only and is not bundled — the stack below
     falls through to Palatino/Cambria/Georgia where it isn't
     installed. Never set long body copy in it.
     Body = neutral humanist sans (system stack, AU web standard).
     =========================================================== */
  --font-display: "Optima", "Optima nova", "Palatino Linotype", "Palatino",
                  "URW Palladio L", "Cambria", Georgia, serif;
  --font-body:    "Aptos", "Calibri", "Helvetica Neue", Helvetica, Arial,
                  system-ui, sans-serif;
  --font-num:     var(--font-body);   /* numerals share the body face */

  /* ===========================================================
     TYPE SCALE  (web px — 16px body baseline)
     =========================================================== */
  --fs-display:   64px;   /* hero / cover title   */
  --fs-h1:        44px;
  --fs-h2:        32px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   13px;
  --fs-eyebrow:   12px;

  --lh-display:   1.06;
  --lh-heading:   1.15;
  --lh-body:      1.6;
  --lh-tight:     1.3;

  --ls-display:   -0.01em;  /* track display tightly */
  --ls-eyebrow:   0.14em;   /* letter-spaced eyebrows / labels */
  --ls-body:      0;

  --fw-regular:   400;
  --fw-bold:      700;

  /* ===========================================================
     SPACING, RADII, SHADOW, LAYOUT
     =========================================================== */
  --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;

  --radius-0:  0px;     /* default — Inglis UI is largely square-cornered */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(33, 52, 95, 0.08);
  --shadow-md: 0 2px 8px rgba(33, 52, 95, 0.10);
  --shadow-lg: 0 8px 28px rgba(33, 52, 95, 0.14);

  --maxw-content: 1200px;
  --maxw-text:    680px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop-in defaults; mix with the tokens above.
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--inglis-blue);   /* section heads often in Inglis Blue */
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--inglis-blue);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-tight);
}

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--inglis-blue);
}

/* Numerals carry weight in this industry — prices, lots, dates */
.numeral {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

a, .link {
  color: var(--link);
  text-decoration: none;
}
a:hover, .link:hover {
  color: var(--link-hover);
  text-decoration: underline;
}