@layer base {
  :root {
    --radius: 0.625rem;

    --color-red: #eb5757;
    --color-green: #4cb782;
    --color-orange: #f2994a;
    --color-blue: #477ee4;

    --grey-dark-1: #161618;
    --grey-dark-2: #1b1b1d;
    --grey-dark-3: #1f1f22;
    --grey-dark-4: #262629;
    --grey-dark-5: #2c2c30;
    --grey-dark-6: #34343a;
    --grey-dark-7: #3e3e44;
    --grey-dark-8: #504f57;
    --grey-dark-9: #706f78;
    --grey-dark-10: #7e7d86;
    --grey-dark-11: #a09fa6;
    --grey-dark-12: #ededef;

    --grey-light-1: #fdfcfd;
    --grey-light-2: #f7f6f7;
    --grey-light-3: #f0eff0;
    --grey-light-4: #ecebec;
    --grey-light-5: #e9e8ea;
    --grey-light-6: #e3e1e3;
    --grey-light-7: #dcdbdd;
    --grey-light-8: #c8c7cb;
    --grey-light-9: #908e96;
    --grey-light-10: #86848d;
    --grey-light-11: #6f6e77;
    --grey-light-12: #1a1523;

    --color-white: #fff;
    --color-black: #000;
    --color-hide-background: rgba(0, 0, 0, 0.4);
  }

  [data-theme="light"] {
    --support-world-background: hsl(202deg 55% 91%);
    --search-highlight: oklch(94.5% 0.129 101.54);
    --org-search-highlight: oklch(90.1% 0.076 70.697);
    --activity: oklch(96.2% 0.059 95.617);
    --activity-foreground: oklch(55.5% 0.163 48.998);
    --activity-emphasis: oklch(27.9% 0.077 45.635);
    --nps-detractor: oklch(93.6% 0.032 17.717);
    --nps-detractor-foreground: oklch(44.4% 0.177 26.899);
    --nps-passive: oklch(96.2% 0.059 95.617);
    --nps-passive-foreground: oklch(47.3% 0.137 46.201);
    --nps-promoter: oklch(95% 0.052 163.051);
    --nps-promoter-foreground: oklch(43.2% 0.095 166.913);
    --meeting-timer-foreground: var(--meeting-host-label);
    --meeting-timer-overtime: oklch(57.7% 0.245 27.325);
    --meeting-live: var(--meeting-overtime);
    --meeting-live-border: var(--meeting-overtime-border);
    --meeting-live-foreground: var(--meeting-overtime-foreground);
    --meeting-overtime: oklch(97.1% 0.013 17.38);
    --meeting-overtime-border: oklch(88.5% 0.062 18.334);
    --meeting-overtime-foreground: oklch(50.5% 0.213 27.518);
    --meeting-host: oklch(70.5% 0.213 47.604);
    --meeting-host-label: oklch(64.6% 0.222 41.116);
    --meeting-host-foreground: var(--color-white);
    --meeting-progress: oklch(69.6% 0.17 162.48);
    color-scheme: light;
    --docs-canvas: #ffffff;
    --docs-surface: #f5f5f5;
    --docs-text: #1a1919;
    --docs-muted: #6e6a68;
    --docs-border: #d4d4d4;
    --docs-accent: #b7440c;
    --docs-brand: #f87530;
    --docs-brand-hover: #ff9e65;
    --docs-on-brand: var(--color-white);
    --docs-footer: var(--color-black);
    --docs-on-footer: var(--color-white);
    --color-bg-primary: var(--grey-light-1);
    --color-bg-primary-rgb: 253, 252, 253;
    --color-bg-secondary: var(--grey-light-2);
    --color-bg-secondary-rgb: 247, 246, 247;
    --color-bg-tertiary: var(--grey-light-3);
    --color-bg-tertiary-rgb: 240, 239, 240;
    --color-bg-quaternary: var(--grey-light-4);
    --color-bg-quaternary-rgb: 236, 235, 236;
    --color-border-primary: var(--grey-light-5);
    --color-border-secondary: var(--grey-light-6);
    --color-border-tertiary: var(--grey-light-7);
    --color-border-quaternary: var(--grey-light-8);
    --color-text-primary: #1e1f23;
    --color-text-primary-rgb: 30, 31, 35;
    --color-text-secondary: #3b4048;
    --color-text-tertiary: var(--grey-light-11);
    --color-brand-bg-light: #7a8eff;
    --color-brand-bg: #070a18;
    --color-brand-border: #3b3b3b;
    --color-brand-text: #484848;

    --color-bg-codeblock: var(--grey-light-12);

    --color-text-danger: #ff0027;
    --color-border-danger: #ff0027;
    --color-bg-danger: #ff2746;
    --color-bg-success: #13c643;

    --color-text-warning: #ff4800;
    --color-text-success: #008e22;
    --color-bg-warning-subtle: #fff2eb;

    --color-checkbox-success: var(--calendar-day-medium-activity);

    --calendar-day-low-activity: #1dd10d;
    --calendar-day-medium-activity: #35d058;
    --calendar-day-high-activity: #27a844;
    --calendar-day-very-high-activity: #166f2b;

    --card-status-mature: #1f8036;
    --card-status-young: #56d273;
    --card-status-learning: #ffc231;
    --card-status-relearning: #ff8f66;
    --card-status-unscheduled: var(--color-bg-quaternary);

    --gauge-yellow: #ffc231;
    --gauge-green: #55cc70;

    --new-label-bg: #d6ffe0;
    --new-label-text: #166f2b;
    --difficult-label-bg: #ffd6d6;
    --difficult-label-text: #ba0000;

    --color-bg-alert: rgba(0, 0, 0, .9);
    --color-text-alert: var(--grey-light-1);

    --color-bg-notice-warning: #fff7cf;
    --color-text-notice-warning: #826c00;
    --color-border-notice-warning: #ffe14e;

    --color-due-review: var(--color-bg-success);

    --color-star-filled: #ffcf3b;
    --color-star-empty: var(--grey-light-8);
    --color-featured: var(--color-day-new);
    --color-upgrade: var(--color-day-streak);

    --color-day-streak: #ff753f;
    --color-day-new: #2bbd4d;
    --color-day-count: #536dfd;

    --hero-bg: url("/svg/hero/light.svg");

    --background: var(--color-bg-primary);
    --foreground: var(--color-text-primary);
    --card: var(--color-bg-secondary);
    --card-foreground: var(--color-text-primary);
    --popover: var(--color-bg-secondary);
    --popover-foreground: var(--color-text-primary);
    --primary: var(--color-brand-bg);
    --primary-hover: #3d3d3d;
    --primary-foreground: var(--color-white);
    --secondary: var(--color-bg-tertiary);
    --secondary-foreground: var(--color-text-secondary);
    --muted: var(--color-bg-tertiary);
    --muted-foreground: var(--color-text-tertiary);
    --accent: var(--color-bg-quaternary);
    --accent-foreground: var(--color-text-primary);
    --destructive: var(--color-bg-danger);
    --destructive-foreground: var(--color-white);
    --border: var(--color-border-primary);
    --input: var(--color-border-secondary);
    --ring: var(--color-brand-border);
    --chart-1: var(--color-day-new);
    --chart-2: var(--color-day-count);
    --chart-3: var(--color-day-streak);
    --chart-4: var(--gauge-yellow);
    --chart-5: var(--gauge-green);
    --sidebar: var(--color-bg-secondary);
    --sidebar-foreground: var(--color-text-primary);
    --sidebar-primary: var(--color-brand-bg);
    --sidebar-primary-foreground: var(--color-white);
    --sidebar-accent: var(--color-bg-tertiary);
    --sidebar-accent-foreground: var(--color-text-primary);
    --sidebar-border: var(--color-border-primary);
    --sidebar-ring: var(--color-brand-border);
  }

  [data-theme="dark"] {
    --support-world-background: hsl(207deg 36% 16%);
    --search-highlight: oklch(79.5% 0.184 86.047 / 40%);
    --org-search-highlight: oklch(55.3% 0.195 38.402 / 60%);
    --activity: oklch(27.9% 0.077 45.635 / 60%);
    --activity-foreground: oklch(92.4% 0.12 95.746);
    --activity-emphasis: oklch(98.7% 0.022 95.277);
    --nps-detractor: oklch(25.8% 0.092 26.042);
    --nps-detractor-foreground: oklch(88.5% 0.062 18.334);
    --nps-passive: oklch(27.9% 0.077 45.635);
    --nps-passive-foreground: oklch(92.4% 0.12 95.746);
    --nps-promoter: oklch(26.2% 0.051 172.552);
    --nps-promoter-foreground: oklch(90.5% 0.093 164.15);
    --meeting-timer-foreground: oklch(75% 0.183 55.934);
    --meeting-timer-overtime: var(--meeting-overtime-foreground);
    --meeting-live: var(--meeting-overtime);
    --meeting-live-border: var(--meeting-overtime-border);
    --meeting-live-foreground: var(--meeting-overtime-foreground);
    --meeting-overtime: oklch(25.8% 0.092 26.042 / 40%);
    --meeting-overtime-border: oklch(39.6% 0.141 25.723 / 70%);
    --meeting-overtime-foreground: oklch(70.4% 0.191 22.216);
    --meeting-host: oklch(70.5% 0.213 47.604);
    --meeting-host-label: oklch(64.6% 0.222 41.116);
    --meeting-host-foreground: var(--color-white);
    --meeting-progress: oklch(69.6% 0.17 162.48);
    color-scheme: dark;
    --docs-canvas: var(--grey-dark-2);
    --docs-surface: var(--grey-dark-4);
    --docs-text: var(--grey-dark-12);
    --docs-muted: var(--grey-dark-11);
    --docs-border: var(--grey-dark-7);
    --docs-accent: #ff9e65;
    --docs-brand: #f87530;
    --docs-brand-hover: #ff9e65;
    --docs-on-brand: var(--color-white);
    --docs-footer: var(--color-black);
    --docs-on-footer: var(--color-white);
    --color-bg-primary: var(--grey-dark-2);
    --color-bg-primary-rgb: 27, 27, 29;
    --color-bg-secondary: var(--grey-dark-3);
    --color-bg-secondary-rgb: 31, 31, 34;
    --color-bg-tertiary: var(--grey-dark-4);
    --color-bg-tertiary-rgb: 38, 38, 41;
    --color-bg-quaternary: var(--grey-dark-5);
    --color-bg-quaternary-rgb: 44, 44, 48;
    --color-border-primary: var(--grey-dark-5);
    --color-border-secondary: var(--grey-dark-6);
    --color-border-tertiary: var(--grey-dark-7);
    --color-border-quaternary: var(--grey-dark-8);
    --color-text-primary: #f7f8f8;
    --color-text-primary-rgb: 247, 248, 248;
    --color-text-secondary: #d0d6e0;
    --color-text-tertiary: #8a8f98;
    --color-brand-bg-light: #4a5bb7;
    --color-brand-bg: #4a63f8;
    --color-brand-border: #4854fc;
    --color-brand-text: #6982ff;

    --color-bg-codeblock: var(--grey-dark-5);

    --color-text-danger: #f33;
    --color-border-danger: #ff3333;
    --color-bg-danger: #ff2746;
    --color-bg-success: #27ff61;

    --color-text-warning: #ff6e35;
    --color-text-success: #15b53b;
    --color-bg-warning-subtle: #3a1f12;

    --color-checkbox-success: var(--calendar-day-high-activity);

    --calendar-day-low-activity: #0e4429;
    --calendar-day-medium-activity: #006d32;
    --calendar-day-high-activity: #26a641;
    --calendar-day-very-high-activity: #39d353;

    --card-status-mature: #126a26;
    --card-status-young: #3e9653;
    --card-status-learning: #e5ac25;
    --card-status-relearning: #e87d56;
    --card-status-unscheduled: var(--color-bg-quaternary);

    --gauge-yellow: #ffc231;
    --gauge-green: #55cc70;

    --new-label-bg: #193c2a;
    --new-label-text: #20ea42;
    --difficult-label-bg: #3c1919;
    --difficult-label-text: #ff4343;

    --color-bg-alert: rgba(0, 0, 0, .9);
    --color-text-alert: var(--grey-light-1);

    --color-bg-notice-warning: #1e1900;
    --color-text-notice-warning: #e8cd4b;
    --color-border-notice-warning: #6d5a00;

    --color-due-review: var(--color-bg-success);

    --color-star-filled: #ffcf3b;
    --color-star-empty: var(--grey-dark-8);
    --color-featured: var(--color-day-new);
    --color-upgrade: var(--color-day-streak);

    --color-day-streak: #ff753f;
    --color-day-new: #2bbd4d;
    --color-day-count: #536dfd;

    --hero-bg: url("/svg/hero/dark.svg");

    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-hover: #2f2f33;
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: var(--color-white);
    --border: var(--color-border-primary);
    --input: var(--color-border-secondary);
    --ring: var(--color-brand-border);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: var(--color-border-primary);
    --sidebar-ring: var(--color-brand-border);
  }

  * {
    border-color: var(--border);
  }

  body {
    position: relative;
    background-color: var(--background);
    color: var(--foreground);
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

@theme {
  --color-search-highlight: var(--search-highlight);
  --color-org-search-highlight: var(--org-search-highlight);
  --color-activity: var(--activity);
  --color-activity-foreground: var(--activity-foreground);
  --color-activity-emphasis: var(--activity-emphasis);
  --color-nps-detractor: var(--nps-detractor);
  --color-nps-detractor-foreground: var(--nps-detractor-foreground);
  --color-nps-passive: var(--nps-passive);
  --color-nps-passive-foreground: var(--nps-passive-foreground);
  --color-nps-promoter: var(--nps-promoter);
  --color-nps-promoter-foreground: var(--nps-promoter-foreground);
  --color-meeting-timer-foreground: var(--meeting-timer-foreground);
  --color-meeting-timer-overtime: var(--meeting-timer-overtime);
  --color-meeting-live: var(--meeting-live);
  --color-meeting-live-border: var(--meeting-live-border);
  --color-meeting-live-foreground: var(--meeting-live-foreground);
  --color-meeting-host: var(--meeting-host);
  --color-meeting-host-label: var(--meeting-host-label);
  --color-meeting-host-foreground: var(--meeting-host-foreground);
  --color-meeting-progress: var(--meeting-progress);
  --color-meeting-overtime: var(--meeting-overtime);
  --color-meeting-overtime-border: var(--meeting-overtime-border);
  --color-meeting-overtime-foreground: var(--meeting-overtime-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-warning-subtle: var(--color-bg-warning-subtle);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}