/*
  Cosy Cat - shared brand styles for cosycat.shop (Cosy-Cat#41).

  Colours, fonts and component style follow Sarah's in-progress minisite
  handoff (design_handoff_cosy_cat_minisite, 30/09/2026): the page theme
  variables in its README "Design Tokens" table and its tokens.css. Loaded by
  the bio page (index.html) and the privacy page (the cosycat-privacy Worker),
  so both pages and the consent banner look the same.

  Fonts are self-hosted from /brand/fonts/ (Google Fonts files, SIL Open Font
  Licence), so no visitor request goes to Google for them.

  Light is the default. A device set to dark mode gets the minisite's dark
  theme, as the minisite's "Auto" theme does.
*/

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/brand/fonts/cormorant-garamond-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/brand/fonts/cormorant-garamond-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: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/brand/fonts/cormorant-garamond-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/brand/fonts/cormorant-garamond-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;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/brand/fonts/lato-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/brand/fonts/lato-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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/brand/fonts/lato-700-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;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/brand/fonts/lato-700-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;
}

/* Theme variables, light (the minisite's values) */
:root {
  --bg: #faf6f3;
  --card: #ede0df;
  --card-alt: #ffffff;
  --line: #e9dcd6;
  --line-strong: #d4c2be;
  --ink: #4a3f3b;
  --ink-strong: #3f3633;
  --head: #695a55;
  --btn-bg: #695a55;
  --btn-bg-hover: #5a4c48;
  --btn-fg: #ffffff;
  --focus: #695a55;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  color-scheme: light;
}

/* Theme variables, dark (the minisite's values) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2b2422;
    --card: #3a312e;
    --card-alt: #332b28;
    --line: #4a3f3b;
    --line-strong: #5a4c48;
    --ink: #ede0df;
    --ink-strong: #faf6f3;
    --head: #d4c2be;
    --btn-bg: #ede0df;
    --btn-bg-hover: #d4c2be;
    --btn-fg: #3f3633;
    --focus: #d4c2be;

    color-scheme: dark;
  }
}

/* Consent banner and settings panel (Klaro 0.7.22).
   Klaro's own stylesheet reads these variables: dark1 is the panel background,
   dark2 the default button and dividers, dark3 descriptions, light1 text,
   light2 and light3 borders and small print, green1 and green2 the accept
   button, links and switches, blue1 and blue2 "Save my choices",
   white2 and white3 the switch track and knob. Set on .klaro, they win over
   the light-theme values Klaro puts on the page root. */
.klaro {
  --dark1: var(--bg);
  --dark2: var(--line-strong);
  --dark3: var(--head);
  --light1: var(--ink);
  --light2: var(--line);
  --light3: var(--head);
  --green1: var(--btn-bg);
  --green2: var(--btn-bg-hover);
  --green3: var(--focus);
  --blue1: var(--btn-bg);
  --blue2: var(--btn-bg-hover);
  --white2: var(--line-strong);
  --white3: var(--card-alt);
  --button-text-color: var(--btn-fg);
  --border-radius: 12px;
  --font-family: var(--font-body);
  --title-font-family: var(--font-display);
  font-family: var(--font-body);
}
/* The rules below use the #klaro id, which outranks Klaro's own stylesheet
   (injected after this file); plain class selectors would tie and lose. */
#klaro .cookie-notice:not(.cookie-modal-notice),
#klaro .cookie-modal .cm-modal {
  border: 1px solid var(--line);
  box-shadow: 0 0 48px rgba(63, 54, 51, 0.18);
}
#klaro .cookie-notice .cm-btn,
#klaro .cookie-modal .cm-btn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
#klaro .cookie-notice .cm-btn.cm-btn-success:hover,
#klaro .cookie-modal .cm-btn.cm-btn-success:hover,
#klaro .cookie-modal .cm-btn.cm-btn-info:hover {
  background-color: var(--btn-bg-hover);
}
/* Decline is the minisite's secondary button: outline, body-ink text. */
#klaro .cookie-notice .cm-btn.cm-btn-danger,
#klaro .cookie-modal .cm-btn.cm-btn-danger {
  background-color: transparent;
  color: var(--ink);
  border: 1px solid var(--head);
}
#klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
#klaro .cookie-modal .cm-btn.cm-btn-danger:hover {
  background-color: var(--card);
}
#klaro .cookie-notice a,
#klaro .cookie-modal a {
  color: var(--head);
  text-decoration: underline;
}
/* Small print Klaro draws in --dark2 (the divider colour) would fail AA
   contrast, so it takes the heading colour instead. */
#klaro .cm-powered-by a,
#klaro .cm-required,
#klaro .cm-opt-out {
  color: var(--head);
}
#klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
}
#klaro .cm-btn:focus-visible,
#klaro a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}