/*
 * FamilyEasy design tokens, brand "Potager" (docs/brand/BRAND.md). The Android app uses the same palette
 * (android/.../ui/theme/Color.kt), so the names match on both sides. They switch with <html data-theme="light|dark">,
 * set before the first paint by js/theme-init.js and by the theme menu (js/site.js). Use these names only
 * (var(--fe-surface), var(--fe-ink-soft)…) so that light and dark stay consistent. Green is the brand; apricot
 * (accent) is the spice: badges, friends, small warm touches, never large areas.
 */

/* ---- Fonts (self-hosted, SIL Open Font License: fonts/OFL-*.txt) ---- */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/fredoka-latin-500-normal.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: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/fredoka-latin-600-normal.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: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/fonts/fredoka-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/fonts/fredoka-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
  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: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
  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: 'Figtree Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url(/fonts/figtree-latin-wght-italic.woff2) format('woff2-variations');
  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: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/caveat-latin-400-normal.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: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/caveat-latin-ext-400-normal.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;
}

/* ---- Type, shape and motion ---- */
:root {
  --font-display: 'Fredoka', 'Figtree Variable', ui-rounded, system-ui, sans-serif;
  --font-sans: 'Figtree Variable', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
  /* Codes (friend and invitation codes): 0/O and 1/I must be told apart. */
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Type scale after Bringhurst: 12 14 16 18 21 24 30 36 48 60 (size / line height) */
  --text-xs: 0.75rem;
  --leading-xs: 1.1rem;
  --text-sm: 0.875rem;
  --leading-sm: 1.3rem;
  --text-base: 1rem;
  --leading-base: 1.55rem;
  --text-md: 1.125rem;
  --leading-md: 1.7rem;
  --text-lg: 1.3125rem;
  --leading-lg: 1.8rem;
  --text-xl: 1.5rem;
  --leading-xl: 2rem;
  --text-2xl: 1.875rem;
  --leading-2xl: 2.3rem;
  --text-3xl: 2.25rem;
  --leading-3xl: 2.6rem;
  --text-4xl: 3rem;
  --leading-4xl: 3.3rem;
  --text-5xl: 3.75rem;
  --leading-5xl: 4rem;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 9999px;

  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Page widths (Tailwind's max-w-3xl/5xl/6xl). */
  --width-narrow: 48rem;
  --width-medium: 64rem;
  --width-page: 72rem;
}

/* ---- Colours: light (default) ---- */
:root,
[data-theme='light'] {
  color-scheme: light;
  --fe-bg: #f1f6f1;
  --fe-surface: #ffffff;
  --fe-surface-low: #f6f9f6;
  --fe-surface-mid: #e7f0e9;
  --fe-surface-high: #dceadf;
  --fe-surface-highest: #cfe1d3;
  --fe-ink: #1f3329;
  --fe-ink-soft: #4f6458;
  --fe-line: #c9dbcc;
  --fe-line-strong: #7d9384;
  --fe-primary: #2e6a4f;
  --fe-on-primary: #ffffff;
  --fe-primary-soft: #cfe6d6;
  --fe-on-primary-soft: #143826;
  --fe-olive: #4f7a3a;
  --fe-on-olive: #ffffff;
  --fe-olive-soft: #e2efd3;
  --fe-on-olive-soft: #1c3010;
  --fe-honey: #7a5c00;
  --fe-honey-soft: #f8e6a6;
  --fe-on-honey-soft: #3d2e00;
  --fe-accent: #f5b48a;
  --fe-on-accent: #1f3329;
  --fe-accent-soft: #fce6d8;
  --fe-on-accent-soft: #7a3a1a;
  --fe-danger: #b3261e;
  --fe-on-danger: #ffffff;
  --fe-danger-soft: #fde2df;
  --fe-on-danger-soft: #5c1310;
  --fe-scrim: rgb(31 51 41 / 0.45);
  --fe-focus: #2e6a4f;
  /* Depth by tint, not by shadow: only what floats (dialogs, sheets, menus, toasts) gets one. None in dark mode. */
  --fe-shadow-soft: 0 1px 2px rgb(31 51 41 / 0.06), 0 12px 28px -16px rgb(31 51 41 / 0.3);
  --fe-shadow-lift: 0 2px 4px rgb(31 51 41 / 0.06), 0 24px 48px -24px rgb(31 51 41 / 0.4);
  /* Hover shade on coloured fills (the React site's hover:bg-black/10). */
  --fe-hover-shade: rgb(0 0 0 / 0.1);
}

/* ---- Colours: dark ---- */
[data-theme='dark'] {
  color-scheme: dark;
  --fe-bg: #121b16;
  --fe-surface: #18231d;
  --fe-surface-low: #141e18;
  --fe-surface-mid: #1d2a23;
  --fe-surface-high: #25342b;
  --fe-surface-highest: #2e3f35;
  --fe-ink: #e4efe7;
  --fe-ink-soft: #afc3b5;
  --fe-line: #33463a;
  --fe-line-strong: #7e968a;
  --fe-primary: #9fd3b4;
  --fe-on-primary: #0e3a26;
  --fe-primary-soft: #24503b;
  --fe-on-primary-soft: #cfe6d6;
  --fe-olive: #b6d99b;
  --fe-on-olive: #1c3010;
  --fe-olive-soft: #2f4724;
  --fe-on-olive-soft: #e2efd3;
  --fe-honey: #e9cf7a;
  --fe-honey-soft: #4a3b00;
  --fe-on-honey-soft: #f8e6a6;
  --fe-accent: #f5b48a;
  --fe-on-accent: #3a1a08;
  --fe-accent-soft: #5a321c;
  --fe-on-accent-soft: #fce6d8;
  --fe-danger: #ffb4ab;
  --fe-on-danger: #690005;
  --fe-danger-soft: #8c1d18;
  --fe-on-danger-soft: #ffdad6;
  --fe-scrim: rgb(0 0 0 / 0.6);
  --fe-focus: #9fd3b4;
  --fe-shadow-soft: 0 0 #0000;
  --fe-shadow-lift: 0 0 #0000;
  --fe-hover-shade: rgb(255 255 255 / 0.15);
}

@keyframes fe-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fe-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes fe-sheet-in {
  from {
    transform: translateY(100%);
  }
}
@keyframes fe-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes fe-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@keyframes fe-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Indeterminate progress (a picture being prepared or sent). */
@keyframes fe-upload-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(300%);
  }
}