/* ChillAdmin webfonts, self-hosted (generated by generator/fetch_fonts.py;
   re-run it rather than editing by hand). Lora carries display and body copy,
   Nunito Sans the tools, labels, nav and buttons. latin + latin-ext only. */
/* Lora italic latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/design/fonts/lora-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora italic latin */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/design/fonts/lora-italic-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;
}
/* Lora normal latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/design/fonts/lora-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora normal latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/design/fonts/lora-normal-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;
}
/* Nunito Sans italic latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/design/fonts/nunito-sans-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans italic latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/design/fonts/nunito-sans-italic-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;
}
/* Nunito Sans normal latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/design/fonts/nunito-sans-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans normal latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/design/fonts/nunito-sans-normal-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;
}

:root{
/* Base palette — exact values from the ChillAdmin brand book, slides 06-07 */
--ca-navy:#29375B;
--ca-navy-light:#3D4A6B;
--ca-red:#D90417;
--ca-red-mid:#FC6876;
--ca-red-pale:#FD9DA6;
--ca-secondary:#ACA0A0;
--ca-stone:#64636F;
--ca-warm-white:#FFFAF7;
--ca-light-bg:#EAE5DF;
--ca-light-pink:#F8EDEE;
--ca-field:#F5F1EE;
--ca-white:#FFFFFF;

/* Semantic aliases */
--surface-page:var(--ca-warm-white);
--surface-card:var(--ca-white);
--surface-band-pink:var(--ca-light-pink);
--surface-band-light:var(--ca-light-bg);
--surface-trust:var(--ca-light-pink); /* the personal / founder band */
--surface-example:var(--ca-light-bg); /* worked examples in articles */
--surface-field:var(--ca-field);
--surface-inverse:var(--ca-navy);
--surface-footer:var(--ca-navy);

--text-heading:var(--ca-navy);
--text-body:var(--ca-navy);
--text-subheading:var(--ca-stone);
--text-muted:var(--ca-stone); /* 5.9:1 on warm white. Captions, meta, labels */
--text-muted-inverse:var(--ca-secondary); /* #ACA0A0 only on navy or at large sizes */
--text-meta:var(--ca-stone);
--text-inverse:var(--ca-warm-white);
--text-accent:var(--ca-red);
--text-link:var(--ca-red);
--text-link-hover:var(--ca-navy);

--action-bg:var(--ca-red);
--action-bg-hover:#B60313;
--action-bg-active:#960210;
--action-fg:var(--ca-white);
--action-secondary-bg:transparent;
--action-secondary-border:var(--ca-navy);
--action-secondary-fg:var(--ca-navy);
--action-disabled-bg:var(--ca-light-bg);
--action-disabled-fg:var(--ca-secondary);

--border-hairline:#E4DDD7;
--border-field:var(--ca-secondary);
--border-strong:var(--ca-navy);
--rule-accent:var(--ca-red);

--icon-line:var(--ca-navy);
--icon-accent:var(--ca-red);
--icon-line-inverse:var(--ca-warm-white);
}

:root{
/* Two typefaces: Nunito Sans = structure (tools, labels, navigation),
   Lora = voice (display, statements, body). Windows substitutes are baked in. */
--font-structure:"Nunito Sans",Nunito,"Segoe UI",Corbel,sans-serif;
--font-voice:Lora,Constantia,Georgia,serif;

--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */

/* Editorial scale, 2026 evolution. Every size is fluid: phone value at 390px,
   desktop value at 1280px, interpolated in between. Headlines shrink a lot,
   body text barely shrinks. */
--fs-display:clamp(46px, 24.1px + 5.618vw, 96px); /* @kind other */        /* home statement   46 -> 96 */
--fs-display-page:clamp(42px, 25.35px + 4.27vw, 80px); /* @kind other */   /* index title      42 -> 80 */
--fs-article-title:clamp(36px, 22.85px + 3.37vw, 66px); /* @kind other */  /* article title    36 -> 66 */
--fs-statement:clamp(30px, 22.1px + 2.022vw, 48px); /* @kind other */      /* quote / trust    30 -> 48 */
--fs-feature-title:clamp(30px, 22.99px + 1.798vw, 46px); /* @kind other */ /* featured article 30 -> 46 */
--fs-section:clamp(28px, 22.74px + 1.348vw, 40px); /* @kind other */       /* section head     28 -> 40 */
--fs-article-h2:clamp(24px, 19.6px + 1.124vw, 34px); /* @kind other */     /* article H2       24 -> 34 */
--fs-numeral:clamp(44px, 35.24px + 2.247vw, 64px); /* @kind other */       /* red numerals     44 -> 64 */
--fs-list-title:clamp(20px, 19.12px + 0.2247vw, 21px); /* @kind other */   /* Lora list titles */
--fs-lead:clamp(18px, 16.69px + 0.337vw, 21px); /* @kind other */
--fs-body:clamp(18px, 17.12px + 0.2247vw, 20px); /* @kind other */
--fs-tool:clamp(16px, 15.12px + 0.2247vw, 18px); /* @kind other */         /* Nunito 600 tool headings */
--fs-small:clamp(16px, 15.56px + 0.1124vw, 17px); /* @kind other */
--fs-button:17px;
--fs-caption:15px;
--fs-meta:13px;
--fs-eyebrow:12px;

/* Legacy names from the 2025 brand book, kept so older layouts still resolve */
--fs-page-title:var(--fs-display-page);
--fs-page-title-min:42px;
--fs-section-head:var(--fs-section);
--fs-section-head-min:28px;
--fs-card-title:clamp(22px, 20.25px + 0.449vw, 26px); /* @kind other */
--fs-card-title-min:22px;
--fs-body-min:17px;

--lh-display:1.04; /* @kind font */
--lh-title:1.12; /* @kind font */
--lh-statement:1.22; /* @kind font */
--lh-heading:1.25; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-caption:1.45; /* @kind font */

--ls-display:-0.015em;
--ls-eyebrow:0.14em;
--ls-button:0.01em;
--ls-title:-0.01em;

/* Composite roles */
--type-display:var(--fw-regular) var(--fs-display)/var(--lh-display) var(--font-voice);
--type-statement:var(--fw-regular) var(--fs-statement)/var(--lh-statement) var(--font-voice);
--type-section:var(--fw-regular) var(--fs-section)/var(--lh-statement) var(--font-voice);
--type-tool:var(--fw-semibold) var(--fs-tool)/1.35 var(--font-structure);
--type-page-title:var(--fw-regular) var(--fs-page-title)/var(--lh-title) var(--font-voice);
--type-section-head:var(--fw-regular) var(--fs-section-head)/var(--lh-heading) var(--font-voice);
--type-card-title:var(--fw-semibold) var(--fs-card-title)/var(--lh-heading) var(--font-structure);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-voice);
--type-button:var(--fw-semibold) var(--fs-button)/1 var(--font-structure);
--type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-structure);
}

:root{
--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;

/* Layout — fluid. Gutter 22px on a phone, 56px on desktop. */
--content-width:1168px;
--content-gutter:clamp(22px, 7.1px + 3.82vw, 56px); /* @kind spacing */
--measure:680px;          /* article reading column, ~64 characters */
--measure-lead:44ch;      /* lead paragraphs under statements */
--rail-width:220px;       /* article contents rail, desktop only */
--section-padding-y:clamp(48px, 21.7px + 6.74vw, 108px);
--section-padding-y-tight:clamp(36px, 22.9px + 3.37vw, 66px);
--section-padding-y-open:clamp(64px, 27.2px + 9.44vw, 148px);
--card-padding:clamp(20px, 15.6px + 1.124vw, 30px);
--button-padding-y:16px;
--button-padding-x:30px;
--tap-min:44px;
--header-height:64px;
--breakpoint-mobile:760px;
--breakpoint-tablet:1024px; /* 761-1024px: compressed desktop, see readme Responsive */

/* Icons — 48x48 grid, three standard sizes */
--icon-lg:96px;
--icon-md:56px;
--icon-sm:32px;
--icon-stroke:1.6px;
--icon-stroke-small:1.9px;
--icon-label-gap:28px;

/* Logo clear space = cap height of the A in Admin */
--logo-clear-space:0.42em;
--logo-width-standard:300px;
--logo-width-min:120px;
}

:root{
/* Square corners are the rule. Nothing in the brand book is rounded except
   the C mark tile and the round caps on icon strokes. */
--radius-none:0px;
--radius-tile:12px;
--radius-pill:999px;

--border-width-hairline:1px;
--border-width-rule:3px;
--rule-accent-width:64px;
--rule-accent-height:3px;

/* Cards lift by being pure white on warm white, not by shadow. */
--shadow-none:none;
--shadow-card:0 1px 3px rgba(41,55,91,0.06);
--shadow-card-hover:0 4px 14px rgba(41,55,91,0.10);
--shadow-overlay:0 12px 40px rgba(41,55,91,0.14);

--overlay-banner:rgba(255,250,247,0.33);
--overlay-navy:rgba(41,55,91,0.33);
}

:root{
--ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:180ms; /* @kind other */
--duration-slow:260ms; /* @kind other */
--transition-colour:color var(--duration-base) var(--ease-standard),background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard); /* @kind other */
}