/* Lair design tokens. Derived from the Hub's dark palette: warm ink, one signal accent, Funnel Display + Funnel Sans.
   Ember is the default; Pro palettes below share these semantic tokens.
   The accent is a placeholder until Lair has its own brand colour. */

@font-face {
  font-family: 'Funnel Display';
  src: url('fonts/display.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'Funnel Sans';
  src: url('fonts/text.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  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: 'Funnel Sans';
  src: url('fonts/text-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

:root {
  color-scheme: dark;
  --bg: #0d0d0c;
  --surface: #161614;
  --surface-2: #1d1d1a;
  --surface-3: #272723;
  --glass: rgba(22, 22, 20, 0.72);
  --line: #262622;
  --line-strong: #38372f;
  --text: #f3f1ea;
  --text-2: #b9b5a9;
  --text-3: #7f7c72;
  --ink: #f3f1ea;
  --ink-text: #121210;
  --accent: #ff6a2b;
  --accent-text: #ff8d5a;
  --accent-soft: #33190d;
  --accent-line: #5c2a14;
  --glow: rgba(255, 106, 43, 0.13);
  --good: #34c46a;
  --good-ink: #5ad48a;
  --good-soft: #10291a;
  --critical: #f0595e;
  --critical-ink: #ff8589;
  --critical-soft: #341518;
  --warn: #f5b041;
  --warn-soft: #33250d;
  /* To-do priorities, @mentions and sleep stages (the stages checked for colour-blind separation on --surface). */
  --p1: #f0595e;
  --p2: #fb8c3c;
  --p3: #5b9bff;
  --p4: #6c6a62;
  --mention: #82adff;
  --mention-soft: rgba(110, 156, 255, 0.24);
  --sleep-deep: #5a52d6;
  --sleep-light: #3192d6;
  --sleep-rem: #c95aa8;
  --sleep-awake: #d95926;
  --grain: 0.07;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px -18px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
  --r-xl: 30px;
  --r-lg: 24px;
  --r: 18px;
  --r-sm: 13px;
  --r-xs: 9px;
  --font: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Funnel Display', 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --page-max: 1120px;
}

/* Pro palettes also power the miniature theme previews. */
:root[data-palette='ember'],
.theme-preview[data-palette='ember'] {
  --bg: #0d0d0c;
  --surface: #161614;
  --surface-2: #1d1d1a;
  --surface-3: #272723;
  --glass: #161614bb;
  --line: #262622;
  --line-strong: #38372f;
  --text: #f3f1ea;
  --text-2: #b9b5a9;
  --text-3: #7f7c72;
  --ink: #f3f1ea;
  --ink-text: #121210;
  --accent: #ff6a2b;
  --accent-text: #ff8d5a;
  --accent-soft: #33190d;
  --accent-line: #5c2a14;
  --glow: #ff6a2b21;
  color-scheme: dark;
}
:root[data-palette='aurora'],
.theme-preview[data-palette='aurora'] {
  --bg: #09151f;
  --surface: #102331;
  --surface-2: #163040;
  --surface-3: #214255;
  --glass: #102331bb;
  --line: #213c4d;
  --line-strong: #36586a;
  --text: #e4f9f2;
  --text-2: #a0c5cc;
  --text-3: #789ca7;
  --ink: #d9fff0;
  --ink-text: #09281f;
  --accent: #62e3b1;
  --accent-text: #83f2ca;
  --accent-soft: #123e37;
  --accent-line: #2d705e;
  --glow: #62e3b126;
  --r: 22px;
  --r-lg: 28px;
  color-scheme: dark;
}
:root[data-palette='bloom'],
.theme-preview[data-palette='bloom'] {
  --bg: #1b1020;
  --surface: #29182f;
  --surface-2: #35213d;
  --surface-3: #452c4e;
  --glass: #29182fbb;
  --line: #472d4f;
  --line-strong: #654070;
  --text: #fff0fb;
  --text-2: #d4aed1;
  --text-3: #ad82a9;
  --ink: #ffe4f5;
  --ink-text: #35132d;
  --accent: #f682c7;
  --accent-text: #ff9fdd;
  --accent-soft: #4b2340;
  --accent-line: #8c4571;
  --glow: #f682c72a;
  --r: 26px;
  --r-lg: 32px;
  color-scheme: dark;
}
:root[data-palette='dune'],
.theme-preview[data-palette='dune'] {
  --bg: #f3eadc;
  --surface: #fffaf2;
  --surface-2: #eee2cf;
  --surface-3: #e1d2bd;
  --glass: #fffaf2cc;
  --line: #dfd0ba;
  --line-strong: #bfaa8d;
  --text: #34291e;
  --text-2: #6e5a45;
  --text-3: #826d56;
  --ink: #3c3024;
  --ink-text: #fffaf2;
  --accent: #a24a22;
  --accent-text: #9c3b16;
  --accent-soft: #f5dcc9;
  --accent-line: #d9a17b;
  --glow: #b76a2e15;
  --r: 13px;
  --r-lg: 18px;
  --grain: 0.025;
  color-scheme: light;
  --good: #147343;
  --good-ink: #146e40;
  --good-soft: #def2e5;
  --critical: #b62a38;
  --critical-ink: #a22230;
  --critical-soft: #fbe1e3;
  --warn: #8d5708;
  --warn-soft: #f6e9c8;
  --p1: #b62a38;
  --p2: #b5511d;
  --p3: #2766cd;
  --p4: #776e66;
  --mention: #225cad;
  --mention-soft: #cbdcf4;
  --shadow-sm: 0 1px 2px #1724330c;
  --shadow: 0 2px 4px #17243308, 0 14px 34px -18px #17243333;
  --shadow-pop: 0 30px 70px -20px #17243344, 0 2px 8px #17243312;
}
:root[data-palette='glacier'],
.theme-preview[data-palette='glacier'] {
  --bg: #edf3fa;
  --surface: #ffffff;
  --surface-2: #e5eef8;
  --surface-3: #d4e1f1;
  --glass: #ffffffcc;
  --line: #d4dfed;
  --line-strong: #a7bbd5;
  --text: #1b2b45;
  --text-2: #4b607e;
  --text-3: #657997;
  --ink: #183863;
  --ink-text: #ffffff;
  --accent: #2766cd;
  --accent-text: #1c55b0;
  --accent-soft: #deebff;
  --accent-line: #9abded;
  --glow: #2766cd18;
  --r: 18px;
  --r-lg: 24px;
  --grain: 0;
  color-scheme: light;
  --good: #147343;
  --good-ink: #146e40;
  --good-soft: #def2e5;
  --critical: #b62a38;
  --critical-ink: #a22230;
  --critical-soft: #fbe1e3;
  --warn: #8d5708;
  --warn-soft: #f6e9c8;
  --p1: #b62a38;
  --p2: #b5511d;
  --p3: #2766cd;
  --p4: #776e66;
  --mention: #225cad;
  --mention-soft: #cbdcf4;
  --shadow-sm: 0 1px 2px #1724330c;
  --shadow: 0 2px 4px #17243308, 0 14px 34px -18px #17243333;
  --shadow-pop: 0 30px 70px -20px #17243344, 0 2px 8px #17243312;
}

/* ---------- light and dark ----------
   Every theme comes in both. The board sets data-theme on <html> to the mode in use (the owner's choice per device,
   or the device's own setting), and theme previews carry it too. These blocks are more specific than the palettes
   above, so the shared status colours follow the mode and each palette's other half overrides its surfaces. */
:root[data-theme='light'][data-palette],
.theme-preview[data-theme='light'][data-palette] {
  color-scheme: light;
  --good: #147343;
  --good-ink: #146e40;
  --good-soft: #def2e5;
  --critical: #b62a38;
  --critical-ink: #a22230;
  --critical-soft: #fbe1e3;
  --warn: #8d5708;
  --warn-soft: #f6e9c8;
  --p1: #b62a38;
  --p2: #b5511d;
  --p3: #2766cd;
  --p4: #776e66;
  --mention: #225cad;
  --mention-soft: #cbdcf4;
  --sleep-deep: #4a40bf;
  --sleep-light: #2a88d6;
  --sleep-rem: #c0479a;
  --sleep-awake: #e0622c;
  --shadow-sm: 0 1px 2px #1724330c;
  --shadow: 0 2px 4px #17243308, 0 14px 34px -18px #17243333;
  --shadow-pop: 0 30px 70px -20px #17243344, 0 2px 8px #17243312;
}
:root[data-theme='dark'][data-palette],
.theme-preview[data-theme='dark'][data-palette] {
  color-scheme: dark;
  --good: #34c46a;
  --good-ink: #5ad48a;
  --good-soft: #10291a;
  --critical: #f0595e;
  --critical-ink: #ff8589;
  --critical-soft: #341518;
  --warn: #f5b041;
  --warn-soft: #33250d;
  --p1: #f0595e;
  --p2: #fb8c3c;
  --p3: #5b9bff;
  --p4: #6c6a62;
  --mention: #82adff;
  --mention-soft: rgba(110, 156, 255, 0.24);
  --sleep-deep: #5a52d6;
  --sleep-light: #3192d6;
  --sleep-rem: #c95aa8;
  --sleep-awake: #d95926;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px -18px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* Ember's light half is the Hub's warm paper. */
:root[data-palette='ember'][data-theme='light'],
.theme-preview[data-palette='ember'][data-theme='light'] {
  --bg: #f2f0ea;
  --surface: #fbfaf7;
  --surface-2: #f4f2ec;
  --surface-3: #e9e6de;
  --glass: #fbfaf7bd;
  --line: #e4e0d6;
  --line-strong: #d3cec1;
  --text: #121210;
  --text-2: #57544c;
  --text-3: #7d796f;
  --ink: #121210;
  --ink-text: #fbfaf7;
  --accent: #ff5b1f;
  --accent-text: #c2410c;
  --accent-soft: #ffeadf;
  --accent-line: #ffcdb5;
  --glow: #ff6e3224;
  --grain: 0.05;
}
:root[data-palette='aurora'][data-theme='light'],
.theme-preview[data-palette='aurora'][data-theme='light'] {
  --bg: #eef6f3;
  --surface: #fbfefd;
  --surface-2: #e6f1ed;
  --surface-3: #d5e7e1;
  --glass: #fbfefdcc;
  --line: #d3e4de;
  --line-strong: #a9c8be;
  --text: #0f2a2a;
  --text-2: #3f5e5d;
  --text-3: #5b7876;
  --ink: #0f3b33;
  --ink-text: #f4fffb;
  --accent: #0f9d72;
  --accent-text: #0b7353;
  --accent-soft: #d6f3e8;
  --accent-line: #8fd6bb;
  --glow: #0f9d7218;
  --grain: 0.03;
}
:root[data-palette='bloom'][data-theme='light'],
.theme-preview[data-palette='bloom'][data-theme='light'] {
  --bg: #fbf0f6;
  --surface: #fffafd;
  --surface-2: #f6e6f0;
  --surface-3: #ecd4e3;
  --glass: #fffafdcc;
  --line: #ecd6e4;
  --line-strong: #d4aac4;
  --text: #2e1029;
  --text-2: #6a3f61;
  --text-3: #85597c;
  --ink: #3d1235;
  --ink-text: #fff5fb;
  --accent: #d63c95;
  --accent-text: #a8236f;
  --accent-soft: #fbdbed;
  --accent-line: #eea3cd;
  --glow: #d63c9518;
  --grain: 0.03;
}
:root[data-palette='dune'][data-theme='dark'],
.theme-preview[data-palette='dune'][data-theme='dark'] {
  --bg: #17120d;
  --surface: #211a13;
  --surface-2: #2a2118;
  --surface-3: #362b20;
  --glass: #211a13bb;
  --line: #33281d;
  --line-strong: #4b3c2c;
  --text: #f5ebdc;
  --text-2: #c9b49a;
  --text-3: #94816b;
  --ink: #f5ebdc;
  --ink-text: #2a1f15;
  --accent: #e08a52;
  --accent-text: #f0a271;
  --accent-soft: #3a2414;
  --accent-line: #6b4127;
  --glow: #e08a5222;
  --grain: 0.06;
}
:root[data-palette='glacier'][data-theme='dark'],
.theme-preview[data-palette='glacier'][data-theme='dark'] {
  --bg: #0b1220;
  --surface: #111b2e;
  --surface-2: #17233a;
  --surface-3: #20304b;
  --glass: #111b2ebb;
  --line: #1f2d45;
  --line-strong: #33476a;
  --text: #e8f0fc;
  --text-2: #a9bbd6;
  --text-3: #7a8eae;
  --ink: #e3edff;
  --ink-text: #0e1a30;
  --accent: #5b9bff;
  --accent-text: #86b6ff;
  --accent-soft: #15284a;
  --accent-line: #2b4d85;
  --glow: #5b9bff22;
  --grain: 0.04;
}