/* A2B design tokens: the "Organic" fonts and CSS custom properties only.
   No element styles and only one class (the shared loading animation at the end), so it is safe to load on any page, including
   pages that have not been converted to the new design yet. a2b-shell.js
   needs it. Converted pages also load design-tokens.css (the components),
   after this file. Source: _guides/ui-redesign/redesign/design-tokens.css. */

/* latin-ext */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-caprasimo-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;
}
/* latin */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-caprasimo-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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-figtree-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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("font-figtree-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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("font-figtree-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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("font-figtree-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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("font-figtree-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;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("font-figtree-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 {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

/* ── Loading animation ───────────────────────────────────────────────────────
   The one shared class in this file: an A2B badge whose letters hop in turn while
   a sage ring circles it. Used for every "Loading…" state (A2BShell.loader() or
   the same markup written into a page). Still for people who ask for less motion. */
.a2b-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 16px;
  color: var(--color-neutral-700);
  font: 600 14px/1.4 var(--font-body);
  text-align: center;
}
.a2b-loader-mark {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  flex: none;
}
.a2b-loader-mark::before,
.a2b-loader-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.a2b-loader-mark::before {
  border: 5px solid color-mix(in srgb, var(--color-accent-2) 22%, transparent);
}
.a2b-loader-mark::after {
  border: 5px solid transparent;
  border-top-color: var(--color-accent-2);
  border-right-color: var(--color-accent-2);
  animation: a2b-spin 1.1s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
}
.a2b-loader-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 18px/1 var(--font-heading);
  letter-spacing: -0.02em;
  box-shadow: var(--shadow-md);
  animation: a2b-breathe 1.8s ease-in-out infinite;
}
.a2b-loader-badge span {
  display: inline-block;
  animation: a2b-hop 1.2s ease-in-out infinite;
}
.a2b-loader-badge span:nth-child(2) { animation-delay: 0.15s; }
.a2b-loader-badge span:nth-child(3) { animation-delay: 0.3s; }
/* Small version, for a note inside a card. */
.a2b-loader.sm {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  text-align: left;
}
.a2b-loader.sm .a2b-loader-mark { width: 30px; height: 30px; }
.a2b-loader.sm .a2b-loader-mark::before,
.a2b-loader.sm .a2b-loader-mark::after { border-width: 3px; }
.a2b-loader.sm .a2b-loader-badge {
  width: 22px;
  height: 22px;
  font-size: 7.5px;
  box-shadow: none;
}
@keyframes a2b-spin { to { transform: rotate(360deg); } }
@keyframes a2b-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.93); } }
@keyframes a2b-hop { 0%, 55%, 100% { transform: none; } 25% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .a2b-loader-mark::after,
  .a2b-loader-badge,
  .a2b-loader-badge span { animation: none; }
}