/* HomeIsSecure, human redesign 2026-10-13: design tokens.
   Concept: "Workwear and the four seasons" (D:/JDA Sites/_tools/site-design/briefs/redesign-2026-10/homeissecure/
   ART-DIRECTION.md, section 2): canvas tan, charcoal and kraft paper, stamped tags, real photographs of homes through
   the year and of the crews who keep them running.
   The brand values come first (--tan, --charcoal ...). The role names below them (--color-*, --font-*, --text-* ...)
   are the ones the inner pages of the first build are written with; they are mapped onto the brand here, so every page
   takes the new palette and type until its own redesign.
   Roles are strict: tan = the action colour (button fill, active marks, hang-tags, checks; never text on white);
   charcoal = all text, the logo block, the kick-plate, a few dark panels; kraft = inset panels and card backs; sky =
   small accents only (season marks, the route line, the focus ring on charcoal). */

/* ---- faces (OFL, self-hosted WOFF2; see /assets/fonts/FONT-NOTES.txt). Schibsted Grotesk is one variable file
   (weights 400-900); Michroma has one weight and is used only for stamped tags and big numerals. ---- */
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/redesign/michroma-400-latin.woff2") format("woff2");
  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: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/redesign/michroma-400-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../../fonts/redesign/schibsted-grotesk-latin.woff2") format("woff2");
  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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../../fonts/redesign/schibsted-grotesk-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* metric-matched fallbacks: the swap to the web font keeps line breaks and line boxes (no layout shift) */
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 104.78%;
  ascent-override: 93.2%;
  descent-override: 24.61%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Michroma Fallback";
  src: local("Verdana"), local("DejaVu Sans");
  size-adjust: 122.34%;
  ascent-override: 94.51%;
  descent-override: 21.71%;
  line-gap-override: 0%;
}

:root {
  /* ---- brand colours (ART-DIRECTION.md 2) ---- */
  --tan: #c2965a;          /* the action colour; charcoal label on it 5.9:1; never text on white */
  --tan-d: #b38449;        /* button hover */
  --charcoal: #24221f;     /* text, headings, logo block, kick-plate, dark panels (15.9:1 on white) */
  --kraft: #e6d7bc;        /* inset panels, card backs on white (charcoal on kraft 12.9:1, muted 5.0:1) */
  --sky: #9ccbea;          /* small accents only: season marks, the route line, focus ring on charcoal */
  --white: #ffffff;        /* page */
  --muted: #5e574d;        /* captions, dates, help text (7.1:1 on white) */
  --line: #8a7f6e;         /* input borders (3.9:1) */
  --line-soft: #dccfb8;    /* hairlines */
  --ink-20: rgba(36, 34, 31, 0.2);   /* charcoal 20 %: ledger rules */
  --ink-08: rgba(36, 34, 31, 0.08);
  --on-dark-muted: #d7ccb9;          /* secondary text on charcoal (11.4:1) */

  /* ---- faces ---- */
  --f-sans: "Schibsted Grotesk", "Schibsted Grotesk Fallback", system-ui, sans-serif;
  --f-tag: "Michroma", "Michroma Fallback", Verdana, sans-serif;

  /* ---- type scale (desktop; 390 px values in the media query): each size has one job ---- */
  --t-h1: 76px;            /* the home statement (Schibsted 900) */
  --t-h2: 46px;            /* section titles (800) */
  --t-h3: 24px;            /* titles inside sections (800) */
  --t-body: 18px;          /* running text, 1.55 */
  --t-lede: 20px;          /* the first paragraph of a section */
  --t-small: 15px;         /* lists of links, captions, footer */
  --t-tag: 12px;           /* stamped tags (Michroma, uppercase, +0.14em) */
  --track-tight: -0.025em;
  --track-tag: 0.14em;

  /* ---- spacing (8 px base) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --sec: 120px;            /* vertical padding of a full section */

  /* ---- grid and frame ---- */
  --wrap: 1240px;          /* content width: 12 columns, 24 px gutters */
  --gut: 24px;
  --pad: 40px;             /* side padding of the page content */
  --inset: 20px;           /* kraft and charcoal panels sit 20 px in from the viewport (max 1400 px wide) */
  --panel-r: 28px;         /* panel corners */
  --photo-r: 20px;         /* photos inside panels */
  --card-r: 6px;           /* dog-ear cards */
  --btn-r: 4px;            /* the kick-plate button */
  --fold: 22px;            /* the dog-ear fold of cards */
  --hdr: 88px;             /* header height (68 px once scrolled; 64 px below 1200 px) */

  /* ---- the role names of the first build's inner pages, mapped onto the brand ---- */
  --color-bg: var(--white);
  --color-surface: var(--kraft);
  --color-ink: var(--charcoal);
  --color-muted: var(--muted);
  --color-line: var(--line);
  --color-line-soft: var(--line-soft);
  --color-accent: var(--tan);
  --color-accent-ink: var(--charcoal);
  --color-accent-text: var(--charcoal);
  --font-heading: var(--f-sans);
  --font-subhead: var(--f-sans);
  --font-body: var(--f-sans);
  --font-label: var(--f-sans);
  --font-button: var(--f-sans);
  --weight-heading: 800;
  --weight-subhead: 800;
  --weight-body: 400;
  --weight-bold: 700;
  --weight-label: 600;
  --weight-button: 700;
  --heading-transform: none;
  --heading-tracking: var(--track-tight);
  --text-h1: 64px;
  --text-page-title: 56px;
  --text-h2: 40px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body: 18px;
  --text-small: 15px;
  --text-caption: 13px;
  --leading-body: 1.55;
  --leading-heading: 1.08;
  --leading-h1: 1;
  --leading-label: 1.4;
  --tracking-label: 0.08em;
  --measure: 64ch;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --space-8: 72px; --space-9: 96px; --space-10: 144px;
  --section-y: 96px;
  --radius-button: var(--btn-r);
  --radius-card: var(--card-r);
  --radius-image: 14px;
  --radius-input: 4px;
  --border-width: 1px;
  --border-card: 1px solid var(--line-soft);
  --rule: 1px solid var(--line-soft);
  --rule-soft: 1px solid var(--line-soft);
  --shadow-card: none;
  --shadow-button: none;
  --stroke: 1.5px;
  --paper: 24px;
  --container: calc(var(--wrap) + 2 * var(--pad));
  --gutter: var(--pad);
  --grid-gap: 48px;
  --columns: 12;
  --control-height: 52px;
  --rail: 0px;             /* the first build's left rail is gone */
  --bar: var(--hdr);

  /* ---- Bootstrap 5.3 mapped onto the brand (its reboot, grid, collapse and offcanvas stay) ---- */
  --bs-body-font-family: var(--f-sans);
  --bs-body-font-size: var(--t-body);
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--charcoal);
  --bs-body-color-rgb: 36, 34, 31;
  --bs-body-bg: var(--white);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: var(--charcoal);
  --bs-emphasis-color-rgb: 36, 34, 31;
  --bs-secondary-color: var(--muted);
  --bs-tertiary-color: var(--muted);
  --bs-heading-color: inherit;
  --bs-link-color: var(--charcoal);
  --bs-link-color-rgb: 36, 34, 31;
  --bs-link-hover-color: var(--charcoal);
  --bs-link-hover-color-rgb: 36, 34, 31;
  --bs-link-decoration: underline;
  --bs-border-color: var(--line);
  --bs-border-width: 1px;
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-pill: 4px;
  --bs-box-shadow: none;
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-color: var(--charcoal);
  --bs-form-valid-color: var(--charcoal);
  --bs-form-valid-border-color: var(--line);
  --bs-form-invalid-color: var(--charcoal);
  --bs-form-invalid-border-color: var(--charcoal);
  --bs-code-color: var(--charcoal);
  --bs-highlight-bg: var(--kraft);
}

@media (max-width: 1199.98px) {
  :root { --hdr: 64px; --pad: 32px; --inset: 16px; --sec: 96px; }
}
@media (max-width: 767.98px) {
  :root {
    --t-h1: 44px;
    --t-h2: 32px;
    --t-h3: 21px;
    --t-body: 17px;
    --t-lede: 18px;
    --t-tag: 11px;
    --pad: 24px;
    --inset: 8px;
    --panel-r: 22px;
    --photo-r: 16px;
    --sec: 72px;
    --text-h1: 40px;
    --text-page-title: 38px;
    --text-h2: 30px;
    --text-h3: 21px;
    --text-h4: 18px;
    --text-body: 17px;
    --grid-gap: 24px;
    --section-y: 64px;
  }
}