/* Makado: generated from tokens.json */
:root, [data-theme="light"] {
  --background-base: #ffffff;
  --background-layer-1: #f7f8fa;
  --background-rest: #f0f2f5;
  --background-product: #f3f4f6;
  --background-frame: #eef0f3;
  --background-page: #ffffff;
  --glass-surface: rgba(255, 255, 255, 0.58);
  --glass-surface-strong: rgba(255, 255, 255, 0.76);
  --glass-rim: rgba(255, 255, 255, 0.7);
  --glass-highlight: rgba(255, 255, 255, 0.95);
  --glass-edge: rgba(14, 20, 27, 0.07);
  --glass-shadow: 0 12px 40px rgba(14, 20, 27, 0.1), 0 2px 8px rgba(14, 20, 27, 0.05);
  --glass-blur: saturate(190%) blur(30px);
  --glass-elevation: 0 0 0 1px var(--glass-edge), inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  --surface-edge: rgba(14, 20, 27, 0.05);
  --selected-fill: #ffffff;
  --glass-track: rgba(255, 255, 255, 0.35);
  --glass-track-edge: inset 0 0 0 1px rgba(14, 20, 27, 0.06), inset 0 1px 2px rgba(14, 20, 27, 0.05);
  --selected-shadow: 0 0 0 0.5px rgba(14, 20, 27, 0.06), 0 1px 2px rgba(14, 20, 27, 0.08), 0 2px 8px rgba(14, 20, 27, 0.06);
  --cta-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --cta-shadow: 0 1px 2px rgba(14, 20, 27, 0.14), 0 2px 6px rgba(14, 20, 27, 0.08);
  --cta-shadow-hover: inset 0 0 0 100px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(14, 20, 27, 0.14), 0 8px 20px rgba(14, 20, 27, 0.16);
  --cta-shadow-pressed: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(14, 20, 27, 0.1);
  --glow-1: rgba(63, 171, 246, 0.24);
  --glow-2: rgba(37, 112, 244, 0.2);
  --glow-3: rgba(252, 221, 130, 0.34);
  --glow-4: rgba(37, 112, 244, 0.2);
  --surface-shadow: 0 1px 2px rgba(14, 20, 27, 0.04), 0 6px 20px rgba(14, 20, 27, 0.04);
  --background-layer-2: #ffffff;
  --background-elevated: #ffffff;
  --gray-25: #ffffff;
  --gray-50: #f7f8fa;
  --gray-75: #f1f3f6;
  --gray-100: #e7e9ec;
  --gray-200: #dee1e5;
  --gray-300: #d8dade;
  --gray-400: #c3c6cb;
  --gray-500: #8b9095;
  --gray-600: #6d7278;
  --gray-700: #4b5158;
  --gray-800: #242a31;
  --gray-900: #0e141b;
  --gray-1000: #080d15;
  --heading: var(--gray-900);
  --body: var(--gray-800);
  --subdued: var(--gray-700);
  --detail: var(--gray-600);
  --divider: var(--gray-200);
  --field-border: var(--gray-300);
  --control-border: var(--gray-500);
  --container-edge: var(--gray-300);
  --button-fill: var(--gray-200);
  --button-fill-hover: var(--gray-300);
  --accent: #174af2;
  --accent-hover: #0b3ed2;
  --accent-content: #174af2;
  --accent-subtle: #e0ebff;
  --accent-visual: #2570f4;
  --on-accent: #ffffff;
  --focus-indicator: #2570f4;
  --brand-yellow: #fcdd82;
  --on-brand-yellow: #080d15;
  --brand-sky: #3fabf6;
  --brand-mint: #40d6aa;
  --neutral: var(--gray-800);
  --neutral-hover: var(--gray-900);
  --on-neutral: var(--gray-25);
  --neutral-subtle: var(--gray-100);
  --neutral-subtle-hover: var(--gray-200);
  --neutral-visual: #8b9095;
  --label-fill: var(--gray-600);
  --on-label-fill: #ffffff;
  --negative: #d73220;
  --negative-hover: #b72818;
  --negative-content: #d73220;
  --negative-subtle: #ffebe8;
  --negative-visual: #f03823;
  --notice: #fc7d00;
  --on-notice: #000000;
  --notice-subtle: #ffeccf;
  --notice-visual: #d45b00;
  --positive: #05834e;
  --positive-subtle: #d7f7e1;
  --positive-visual: #079355;
  --positive-content: #067a47;
  --informative-visual: var(--accent-visual);
  --cyan-subtle: #d6f1fb;
  --orange-subtle: #ffe6d9;
  --yellow-subtle: #fff1b3;
  --cyan-visual: #0b8fb3;
  --yellow-visual: #a87d00;
  --illo-ink: var(--gray-900);
  --illo-paper: #ffffff;
  --static-white: #ffffff;
  --illo-blue: #c4dafd;
  --illo-mint: #b6ecd9;
  --illo-sand: #fbe3a0;
  --illo-blue-soft: #e8f0fe;
  --illo-mint-soft: #e3f6ef;
  --illo-sand-soft: #fdf2d2;
  --shadow-emphasized: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-dragged: 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.1);
  --scrim: rgba(8, 13, 21, 0.62);
  --gradient-informative: linear-gradient(90deg, #174af2, #4f8ff7);
  --gradient-positive: linear-gradient(90deg, #05834e, #2fbf7a);
  --gradient-notice: linear-gradient(90deg, #d45b00, #fc9a3c);
  --gradient-cyan: linear-gradient(90deg, #0b8fb3, #45c8ea);
  --gradient-yellow: linear-gradient(90deg, #a87d00, #f0c53c);
  --gradient-negative: linear-gradient(90deg, #d73220, #f2685a);
  --gradient-neutral: linear-gradient(90deg, #8b9095, #b5b9be);
}
[data-theme="dark"] {
  --background-base: #0d0f13;
  --background-layer-1: #15181c;
  --background-rest: #121418;
  --background-product: #e6e8eb;
  --background-frame: #0d0f13;
  --background-page: #0f1115;
  --glass-surface: rgba(44, 47, 53, 0.52);
  --glass-surface-strong: rgba(36, 39, 44, 0.76);
  --glass-rim: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-edge: rgba(0, 0, 0, 0.5);
  --glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --glass-blur: saturate(170%) blur(30px);
  --glass-elevation: 0 0 0 1px var(--glass-edge), inset 0 0 0 1px var(--glass-rim), inset 0 1px 0 var(--glass-highlight), var(--glass-shadow);
  --surface-edge: rgba(255, 255, 255, 0.1);
  --selected-fill: rgba(255, 255, 255, 0.14);
  --glass-track: rgba(0, 0, 0, 0.18);
  --glass-track-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.25);
  --selected-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  --cta-rim: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  --cta-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.28);
  --cta-shadow-hover: inset 0 0 0 100px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.45);
  --cta-shadow-pressed: inset 0 1px 3px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.3);
  --glow-1: rgba(63, 171, 246, 0.2);
  --glow-2: rgba(37, 112, 244, 0.32);
  --glow-3: rgba(252, 221, 130, 0.11);
  --glow-4: rgba(37, 112, 244, 0.32);
  --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.2);
  --background-layer-2: #1c1f24;
  --background-elevated: #1c1f24;
  --gray-25: #0d0f13;
  --gray-50: #15181c;
  --gray-75: #1c1f24;
  --gray-100: #262a30;
  --gray-200: #2c3136;
  --gray-300: #34393e;
  --gray-400: #3f444a;
  --gray-500: #696e74;
  --gray-600: #868b91;
  --gray-700: #abb0b5;
  --gray-800: #d9dbdf;
  --gray-900: #f1f2f4;
  --gray-1000: #ffffff;
  --heading: var(--gray-900);
  --body: var(--gray-800);
  --subdued: var(--gray-700);
  --detail: var(--gray-600);
  --divider: var(--gray-200);
  --field-border: var(--gray-300);
  --control-border: var(--gray-500);
  --container-edge: #3a3f45;
  --button-fill: var(--gray-300);
  --button-fill-hover: var(--gray-400);
  --accent: #2168f2;
  --accent-hover: #1657ea;
  --accent-content: #74b2f8;
  --accent-subtle: #0b2964;
  --accent-visual: #3e89f7;
  --on-accent: #ffffff;
  --focus-indicator: #3e89f7;
  --brand-yellow: #fcdd82;
  --on-brand-yellow: #080d15;
  --brand-sky: #3fabf6;
  --brand-mint: #40d6aa;
  --neutral: var(--gray-800);
  --neutral-hover: var(--gray-900);
  --on-neutral: var(--gray-25);
  --neutral-subtle: var(--gray-100);
  --neutral-subtle-hover: var(--gray-200);
  --neutral-visual: #868b91;
  --label-fill: var(--gray-400);
  --on-label-fill: #ffffff;
  --negative: #df3422;
  --negative-hover: #cd2e1d;
  --negative-content: #fc432e;
  --negative-subtle: #571107;
  --negative-visual: #fc432e;
  --notice: #e06400;
  --on-notice: #000000;
  --notice-subtle: #501b00;
  --notice-visual: #e06400;
  --positive: #068850;
  --positive-subtle: #003326;
  --positive-visual: #099d59;
  --positive-content: #3fd08f;
  --informative-visual: var(--accent-visual);
  --cyan-subtle: #0a2a38;
  --orange-subtle: #4a2414;
  --yellow-subtle: #3a2c06;
  --cyan-visual: #3fc3e6;
  --yellow-visual: #e3b52a;
  --illo-ink: var(--gray-800);
  --illo-paper: var(--gray-75);
  --static-white: #ffffff;
  --illo-blue: #284a8c;
  --illo-mint: #1f5e4c;
  --illo-sand: #7a6224;
  --illo-blue-soft: #18264a;
  --illo-mint-soft: #14322b;
  --illo-sand-soft: #30291a;
  --shadow-emphasized: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.28);
  --shadow-dragged: 0 10px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.4);
  --scrim: rgba(0, 0, 0, 0.78);
  --gradient-informative: linear-gradient(90deg, #2168f2, #74b2f8);
  --gradient-positive: linear-gradient(90deg, #068850, #3fd08f);
  --gradient-notice: linear-gradient(90deg, #e06400, #ff9a3d);
  --gradient-cyan: linear-gradient(90deg, #1aa7cf, #6ad6f2);
  --gradient-yellow: linear-gradient(90deg, #c99a10, #f2cf55);
  --gradient-negative: linear-gradient(90deg, #df3422, #ff7563);
  --gradient-neutral: linear-gradient(90deg, #696e74, #9aa0a6);
}
:root {
  --spacing-25: 1px;
  --spacing-50: 2px;
  --spacing-75: 4px;
  --spacing-85: 6px;
  --spacing-100: 8px;
  --spacing-200: 12px;
  --spacing-300: 16px;
  --spacing-350: 20px;
  --spacing-400: 24px;
  --spacing-500: 32px;
  --spacing-600: 40px;
  --spacing-700: 48px;
  --spacing-800: 64px;
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-default: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --component-height-50: 20px;
  --component-height-75: 24px;
  --component-height-100: 32px;
  --component-height-200: 40px;
  --component-height-300: 48px;
  --icon-size-xs: 14px;
  --icon-size-s: 16px;
  --icon-size-m: 20px;
  --icon-size-l: 22px;
  --icon-size-xl: 26px;
  --border-width-100: 1px;
  --border-width-200: 2px;
  --focus-indicator-thickness: 2px;
  --focus-indicator-gap: 2px;
  --side-nav-width: 240px;
  --side-nav-width-collapsed: 72px;
  --motion-duration-100: 120ms;
  --motion-duration-200: 160ms;
  --motion-duration-300: 220ms;
  --motion-duration-400: 320ms;
  --motion-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-press-scale: 0.97;
  --motion-rise: 6px;
  --font-display: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
}
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable-Italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("../fonts/SourceCodePro-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

/* Color themes, chosen in Profile: each one recolors the accent (links, today, focus, informative bars, tints) and the backdrop glow, taken from that version of the Makado mark. Makado is the default. Set with data-backdrop on <html>; works on any element too, for previews */
[data-backdrop="makado"] { --glow-1: rgba(63, 171, 246, 0.24); --glow-2: rgba(37, 112, 244, 0.2); --glow-3: rgba(252, 221, 130, 0.34); --glow-4: rgba(37, 112, 244, 0.2); }
[data-theme="dark"][data-backdrop="makado"], [data-theme="dark"] [data-backdrop="makado"] { --glow-1: rgba(63, 171, 246, 0.2); --glow-2: rgba(37, 112, 244, 0.32); --glow-3: rgba(252, 221, 130, 0.11); --glow-4: rgba(37, 112, 244, 0.32); }
[data-backdrop="ocean"] { --background-frame: #e4f1fb; --accent: #0b62d6; --accent-hover: #0852b6; --accent-content: #0b62d6; --accent-subtle: #dff1ff; --accent-visual: #1d8cf0; --focus-indicator: #1d8cf0; --gradient-informative: linear-gradient(90deg, #0b62d6, #22c4ff); --glow-1: rgba(34, 196, 255, 0.26); --glow-2: rgba(26, 92, 255, 0.24); --glow-3: rgba(34, 196, 255, 0.2); --glow-4: rgba(26, 92, 255, 0.22); }
[data-theme="dark"][data-backdrop="ocean"], [data-theme="dark"] [data-backdrop="ocean"] { --background-frame: #0a1c2e; --accent: #1a6fe0; --accent-hover: #1462cc; --accent-content: #6cc8ff; --accent-subtle: #062c4f; --accent-visual: #33a6ff; --focus-indicator: #33a6ff; --gradient-informative: linear-gradient(90deg, #1a6fe0, #5fd3ff); --glow-1: rgba(34, 196, 255, 0.27); --glow-2: rgba(26, 92, 255, 0.50); --glow-3: rgba(34, 196, 255, 0.24); --glow-4: rgba(26, 92, 255, 0.45); }
[data-backdrop="mint"] { --background-frame: #e0f4f0; --accent: #0c7c72; --accent-hover: #096a61; --accent-content: #0a6c63; --accent-subtle: #d9f6ef; --accent-visual: #14998a; --focus-indicator: #14998a; --gradient-informative: linear-gradient(90deg, #0c7c72, #45c4a6); --glow-1: rgba(52, 201, 196, 0.28); --glow-2: rgba(155, 215, 143, 0.32); --glow-3: rgba(52, 201, 196, 0.22); --glow-4: rgba(69, 196, 166, 0.24); }
[data-theme="dark"][data-backdrop="mint"], [data-theme="dark"] [data-backdrop="mint"] { --background-frame: #0a2020; --accent: #0b7d72; --accent-hover: #096b62; --accent-content: #5fdcc4; --accent-subtle: #06352f; --accent-visual: #36c7b0; --focus-indicator: #36c7b0; --gradient-informative: linear-gradient(90deg, #0e8a7e, #7fe0c4); --glow-1: rgba(52, 201, 196, 0.28); --glow-2: rgba(155, 215, 143, 0.20); --glow-3: rgba(52, 201, 196, 0.22); --glow-4: rgba(69, 196, 166, 0.31); }
[data-backdrop="sunset"] { --background-frame: #f9e8f0; --accent: #c22a6b; --accent-hover: #a8215b; --accent-content: #c22a6b; --accent-subtle: #ffe3ee; --accent-visual: #e8457a; --focus-indicator: #e8457a; --gradient-informative: linear-gradient(90deg, #c22a6b, #f26b8f); --glow-1: rgba(230, 77, 116, 0.2); --glow-2: rgba(252, 110, 78, 0.22); --glow-3: rgba(252, 148, 53, 0.3); --glow-4: rgba(184, 53, 140, 0.16); }
[data-theme="dark"][data-backdrop="sunset"], [data-theme="dark"] [data-backdrop="sunset"] { --background-frame: #280f1d; --accent: #c22a6b; --accent-hover: #a8215b; --accent-content: #ff8fb1; --accent-subtle: #4a1029; --accent-visual: #ff5c8d; --focus-indicator: #ff5c8d; --gradient-informative: linear-gradient(90deg, #c92e70, #ff8fb1); --glow-1: rgba(230, 77, 116, 0.42); --glow-2: rgba(252, 110, 78, 0.30); --glow-3: rgba(252, 148, 53, 0.18); --glow-4: rgba(184, 53, 140, 0.36); }
[data-backdrop="lavender"] { --background-frame: #eceafb; --accent: #5a3fe0; --accent-hover: #4a31c8; --accent-content: #5a3fe0; --accent-subtle: #ebe6ff; --accent-visual: #7b62f2; --focus-indicator: #7b62f2; --gradient-informative: linear-gradient(90deg, #5a3fe0, #a98ef5); --glow-1: rgba(74, 58, 240, 0.18); --glow-2: rgba(169, 142, 245, 0.3); --glow-3: rgba(169, 142, 245, 0.24); --glow-4: rgba(74, 58, 240, 0.16); }
[data-theme="dark"][data-backdrop="lavender"], [data-theme="dark"] [data-backdrop="lavender"] { --background-frame: #171434; --accent: #5f45e4; --accent-hover: #4f37cc; --accent-content: #b3a3ff; --accent-subtle: #241a5c; --accent-visual: #9580ff; --focus-indicator: #9580ff; --gradient-informative: linear-gradient(90deg, #6248e6, #b3a3ff); --glow-1: rgba(74, 58, 240, 0.48); --glow-2: rgba(169, 142, 245, 0.30); --glow-3: rgba(169, 142, 245, 0.21); --glow-4: rgba(74, 58, 240, 0.45); }
[data-backdrop="sand"] { --background-frame: #f3ede1; --accent: #86622a; --accent-hover: #704f1f; --accent-content: #7c5a20; --accent-subtle: #f6ecd8; --accent-visual: #b88a3e; --focus-indicator: #b88a3e; --gradient-informative: linear-gradient(90deg, #86622a, #d4b483); --glow-1: rgba(212, 180, 131, 0.4); --glow-2: rgba(232, 204, 152, 0.42); --glow-3: rgba(184, 154, 103, 0.32); --glow-4: rgba(212, 180, 131, 0.32); }
[data-theme="dark"][data-backdrop="sand"], [data-theme="dark"] [data-backdrop="sand"] { --background-frame: #211c13; --accent: #86622a; --accent-hover: #704f1f; --accent-content: #e2c48d; --accent-subtle: #3a2c14; --accent-visual: #d4ab67; --focus-indicator: #d4ab67; --gradient-informative: linear-gradient(90deg, #a77d3a, #e2c48d); --glow-1: rgba(212, 180, 131, 0.24); --glow-2: rgba(232, 204, 152, 0.18); --glow-3: rgba(184, 154, 103, 0.27); --glow-4: rgba(212, 180, 131, 0.21); }
[data-backdrop="ember"] { --background-frame: #f9eae4; --accent: #c43c12; --accent-hover: #a8320e; --accent-content: #b3360f; --accent-subtle: #ffe6dc; --accent-visual: #f05a28; --focus-indicator: #f05a28; --gradient-informative: linear-gradient(90deg, #c43c12, #fb9a33); --glow-1: rgba(207, 42, 95, 0.18); --glow-2: rgba(242, 106, 43, 0.26); --glow-3: rgba(251, 154, 51, 0.32); --glow-4: rgba(242, 106, 43, 0.2); }
[data-theme="dark"][data-backdrop="ember"], [data-theme="dark"] [data-backdrop="ember"] { --background-frame: #28140f; --accent: #c43c12; --accent-hover: #a8320e; --accent-content: #ff9a6b; --accent-subtle: #4a1a0a; --accent-visual: #ff6a33; --focus-indicator: #ff6a33; --gradient-informative: linear-gradient(90deg, #c94116, #ff9a6b); --glow-1: rgba(207, 42, 95, 0.42); --glow-2: rgba(242, 106, 43, 0.33); --glow-3: rgba(251, 154, 51, 0.18); --glow-4: rgba(242, 106, 43, 0.39); }

/* Frosted glass falls back to solid surfaces for people who ask for less transparency */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme] { --glass-surface: var(--background-elevated); --glass-surface-strong: var(--background-elevated); --glass-blur: none; }
}